/* ====================
全体（共通）
======================= */
div#content {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.contentInner {
	margin: 0 auto;
	width: 1250px;
	padding: 0;
    background-color: #fff;
}

@media screen and (max-width: 1249px) {
	.contentInner {
		width: 100%;
		padding: 0 20px;
	}
}

/* ====================
メインカラー
======================= */
.bg_color {
    background: -moz-linear- gradient(#fdf4d7 0%, #f9f8f4 100%);
    background: -webkit- gradient(linear, left top, left bottom, from(#fdf4d7), to(#f9f8f4));
    background: -webkit- linear-gradient(#fdf4d7 0%, #f9f8f4 100%);
    background: -ms-linear- gradient(#fdf4d7 0%, #f9f8f4 100%);
    background: linear-gradient(#fdf4d7 0%, #f9f8f4 100%);
}


/* ====================
下線
======================= */
#special hr { border: solid 1px #fce89f; }

/* ================
topアニメーション
=================== */

/* 背景画像 */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.hero-bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: bgSlide 25s infinite;
    z-index: 0;
}

.bg1 { animation-delay: 0s; }
.bg2 { animation-delay: 5s; }
.bg3 { animation-delay: 10s; }
.bg4 { animation-delay: 15s; }
.bg5 { animation-delay: 20s; }

@keyframes bgSlide {
    0%     { opacity: 0; }
    5%     { opacity: 1; }
    25%    { opacity: 1; }
    30%    { opacity: 0; }
    100%   { opacity: 0; }
}

/* hero */
.hero-inner {
    position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    z-index: 2;
    box-sizing: border-box;
}

.hero-text {
    width: 66%;
    padding: 20px 10px 10px 10px;
    background: rgba(51, 51, 51, 0.6);
    color: #fff;
    font-size: 1.6rem;
    line-height: 40px;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.5s;
    z-index: 2;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
    .hero-text {
        width: 75%;
        font-size: 1.2rem;
    }
}

/* ====================
目次
======================= */
#pagenav h4.pagenav-ttl {
    background: #fce89f;
    color: #213b6c;
}

#pagenav li a,
.nav_index li a {
    background: #fce89f;
}

#pagenav li a:hover,
.nav_index li a:hover {
    animation: yureru 2s ease-out;
    opacity: 1;
}

#pagenav li a,
.nav_index li a,
#pagenav li.none_rb a {
    color: #213b6c!important;
}

#special #pagenav h4.pagenav-ttl:after {
    display: block;
    content: "";
    position: absolute;
    right: 20px;
    top: 15px;
    width: 20px;
    height: 20px;
    background-image: url('../img/menu_sub-close.png')!important;
    background-size: cover;
}

#special #pagenav h4.pagenav-ttl.open:after {
    background-image: url('../img/menu_sub-open.png')!important;
}

/*
背景色が現れる
------------------------- */
#pagenav li a.btn-5,
.nav_index li a.btn-5 {
    color: #fce89f;
}

#pagenav li a.btn-5:hover,
.nav_index li a.btn-5:hover {
    background: #fce89f;
}

/* ====================
見出し
======================= */
#special h1 {
    color: #213b6c;
    text-shadow: 3px 3px 3px #fff;
}

#special h2 { color: #213b6c; }

#special h2::before,
#special h2::after {
    display: none;
}

#special h3 { background: #213b6c; }

#special h4,
#special h5 {
    color: #213b6c;
    margin: 0 0 20px 0;
}

#special h4.h4_sub,
#special h5.h5_sub {
    margin: 0 0 20px 0;
    color: #e95283;
}

#special h5.h5_sub { line-height: 36px; }

@media screen and (max-width: 768px) {
    #special h4.h4_sub { line-height: 1.6em; }
    #special h5.h5_sub { line-height: 28px; }
}

/* ====================
SNSシェアボタン
======================= */
.sns-share {
    width: 100%;
}

.sns-share ul {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.sns-share ul li {
    background: #fff;
    border-radius: 20px; 
    width: 112px;
}

.sns-share ul li:last-child {
    width: 124px;
}

.sns-share ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 24px;
    width: 100%;
    height: 36px;
    color: #000;
    text-decoration: none;
}

.sns-share ul li a::before {
    content: "";
    position: absolute;
    left: 12px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.sns-share ul li:last-child a::before {
    left: 8px;
}

.x-link a::before {
    height: 14px;
    background: url('../../../img/icon/x.svg');
}

.facebook-link a::before {
    height: 20px;
    background: url('../../../img/icon/facebook-icon.svg');
}

@media screen and (max-width: 768px) {
    .sns-share { margin-bottom: 20px; }
}


/* ====================
リスト
======================= */
ol {
    list-style: none;
    padding-left: 0;
}

/*
通常
------------------------- */
ul.circle-list > li{
    padding: 0 0 0 1.2rem;
    margin: 0 0 0.7rem 0;
    position: relative;
    text-indent: 0rem;
}

.circle-list > li::before {
    content: "";
    background: #f2a2b4;
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 14px;
    margin: auto;
}


/* ====================
テキスト（色付き）
======================= */
.fc-green { color: #00a040; }
.fc-pink { color: #e95283; }
.fc-orange { color: #f39800; }


/* ====================
画像（ヘッダー）
======================= */
.img-bg {
    background-size: cover;
    background-image: url('../img/h_background.jpg');
    background-position: right bottom;
    padding: 1em;
    margin-bottom: 0!important;
}

figcaption {
    text-align: center;
}

@media screen and (max-width: 768px) {
    .img-bg {
        background-position: left bottom!important;
    }
}

/* ====================
ボックス（背景色）
======================= */

.bg_green {
    height: auto;
    padding: 20px;
    background-color: #e4f1e2;
    border: 3px solid #00a040;
    border-radius: 10px;
}

/* ====================
ページ毎 個別スタイル
======================= */

/* 
自衛隊レシピ
---------------------------- */
.recipe-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 
共通
------------------- */
#special .gsdf,
#special .event-intro h4.gsdf {
    background: #598f34;
    background-image: url('../../../img/logo/logo_gsdf.png');
}

#special .asdf,
#special .event-intro h4.asdf {
    background: #0080cc;
    background-image: url('../../../img/logo/logo_asdf.png');
}

#special .msdf,
#special .event-intro h4.msdf {
    background: #2a4198;
    background-image: url('../../../img/logo/logo_msdf.png');
}

/*
①自衛隊の装備品紹介
------------------------- */
#special #job-type div {
    margin: 30px 0 10px 0;
    padding: 10px 40px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    border-left: none;
    border-bottom: none;   
}

#special #job-type div a {
    color: #fff;
}

#special #job-type div.gsdf,
#special #job-type div.asdf,
#special #job-type div.msdf {
    padding-left: 110px;
    background-size: 8%!important;
    background-repeat: no-repeat!important;
    background-position: 0% 100%!important;
}

.gsdf-bg,
.msdf-bg,
.asdf-bg {
    padding: 15px;
    height: 100%;
    margin-bottom: 30px;
}

.gsdf-bg { background: #f0f2e9; }
.msdf-bg { background: #ebebf5; }
.asdf-bg { background: #e9f1fa; }

.gsdf-bg>.bg,
.msdf-bg>.bg,
.asdf-bg>.bg {
    padding: 15px;
}

.gsdf-bg>.bg { background: #e2e7d3; }
.msdf-bg>.bg { background: #d7d5eb; }
.asdf-bg>.bg { background: #d3e4f5; }
.h-130 { height: 130px; }

/*
②広報施設・イベント紹介
------------------------- */
#special .event-intro h4.gsdf,
#special .event-intro h4.asdf,
#special .event-intro h4.msdf {
    color: #fff;
    padding: 15px 10px 5px 10px;
    background-size: 8%;
    background-repeat: no-repeat;
    background-position: 95% 100%;
}

.event-intro .box_gsdf,
.event-intro .box_asdf,
.event-intro .box_msdf {
    width: auto;
    background: #fff;
}

.gsdf-txt { color: #598f34; }
.asdf-txt { color: #0080cc; }
.msdf-txt { color: #2a4198; }

.gsdf-txt,
.asdf-txt,
.msdf-txt {
    font-weight: bold;
}

/*
③防衛省・自衛隊のコンテンツ
------------------------- */
.info-list li {
    background-image: linear-gradient(to right, rgba(0,91,172,0.5), rgba(0,91,172,0.5) 2px, transparent 1px);
}

.info-list li:first-child {
    background: #fce89f;
    color: #213b6c;
}

/* 
多種多様なコース
-------------------------*/
.course-item { padding: 10px; }

h4.crs-orange,
h4.crs-red,
h4.crs-green,
h4.crs-skyBlue,
h4.crs-blue,
h4.crs-pink {
    padding: 15px 10px 10px 10px!important;
    margin: 0 0 10px 0!important;
    width: 100%;
}

h4.crs-orange { background-color: #fde2b9!important; }
h4.crs-red { background-color: #f8c5ab!important; }
h4.crs-green { background-color: #e2eec4!important; }
h4.crs-skyBlue { background-color: #b9e3f9!important; }
h4.crs-blue { background-color: #d2daef!important; }
h4.crs-pink { background-color: #f9d3d2!important; }

.course-01,
.course-02,
.course-03,
.course-04,
.course-05,
.course-06,
.course-07,
.course-08,
.course-09,
.course-10,
.course-11 {
    height: auto;
    background-color: #fff;
}

.course-01,
.course-02 {
    border: 3px solid #f39800;
}

.course-03 { border: 3px solid #e60012; }

.course-04,
.course-05,
.course-06 {
    border: 3px solid #90c31f;
}
.course-07,
.course-08,
.course-09 {
    border: 3px solid #00a0e9;
}

.course-10 { border: 3px solid #005bac; }
.course-11 { border: 3px solid #e9536b; }


@media screen and (max-width: 768px) {
    /*
    自衛隊の装備品紹介
    ------------------------- */
    #special #job-type div {
        display: block;
        padding: 10px;
    }

    #special #job-type div.gsdf,
    #special #job-type div.asdf,
    #special #job-type div.msdf {
        background-size: 16%!important;
    }

    #special #job-type div,
    #special #job-type div a {
        font-size: 20px;
    }

    .gsdf-bg>.bg>p,
    .msdf-bg>.bg>p,
    .asdf-bg>.bg>p {
        margin: 20px 0 0 0;
    }

    .h-130 {
        height: auto;
    }

    /*
    防衛省・自衛隊のコンテンツ
    ------------------------- */
    
    .recruit-link {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .recruit-link > p.inner-arrow-link {
        width: auto;
    }

    .info-list li { display: block; }
    .info-list li div:first-of-type { width: 100%; }
}

@media screen and (min-width: 320px) and (max-width: 520px) {
    #special #job-type div.gsdf,
    #special #job-type div.asdf,
    #special #job-type div.msdf {
        background-size: 24%!important;
    }
}

/* ====================
ページネーション
======================= */
.pdfvwe_box{
    border-top: 1px solid #fce89f;
}

a.prev_button,
a.next_button,
a.pdfvwe_button {
    background: #fce89f;
    color: #213b6c;
}

a.prev_button::before {
    content: '';
    border-top: 2px solid #213b6c;
    border-left: 2px solid #213b6c;
}

a.next_button::before {
    content: '';
    border-top: 2px solid #213b6c;
    border-right: 2px solid #213b6c;
}

@media screen and (max-width:768px) {
    a.prev_button,
    a.next_button {
        background: #fce89f;
        color: #213b6c;
    }

    a.prev_button:hover,
    a.next_button:hover,
    a.pdfvwe_button:hover {
        background: #213b6c;
        color: #fce89f;
        opacity: 1!important;
    }

    a.next_button:hover::before {
        border-top: 2px solid #fce89f!important;
        border-right: 2px solid #fce89f!important;
    }

    a.prev_button:hover:before {
        border-top: 2px solid #fce89f!important;
        border-left: 2px solid #fce89f!important;
    }

    a.pdfvwe_button:hover {
        background: #213b6c;
        color: #fce89f;
    }
}