@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base／固定
========================================*/
body {font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}


/*===== FontSize 早見表(必要なもののみ残す) 　※ 16pxは1remで記載 ※ =====*/
html {
    --12px:calc(12 / 16 * 1rem);
    --13px:calc(13 / 16 * 1rem);
    --14px:calc(14 / 16 * 1rem);
    --15px:calc(15 / 16 * 1rem);
    --20px:calc(20 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --30px:calc(30 / 16 * 1rem);
}


/* topへ戻る */
footer #totop{
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    position:fixed;
    bottom:10px;
    right:0;
    z-index:800;
    display:none;
    cursor:pointer;
}
footer #totop a {display:block;}
footer #totop::after{
    content:"\f106";
    font-family:"FontAwesome";
    font-size:40px;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}



/*========================================
 カスタム用 ／PC&SP
========================================*/

/*===== class名でfontを使用する場合／下記の記述でfontを設定 =====*/
.Font13 {font-size:var(--13px);}

 /* --- 基本設定 --- */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background: linear-gradient(to bottom, #0c1a4d, #1a4a9c, #1f7cb0);
    color: #333;
}
body:before {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:"";
    z-index: -5;
    background: linear-gradient(to bottom, #0c1a4d, #2177c1, #16b4b7);
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}
.sp {
    display: none;
}
.marginTop {
    margin-top: 2rem;
}

/* --- コンテナ --- */
.wrapper {
    width:90%;
    max-width: 1080px;
    margin: 3rem auto;
    background: #fff;
}

/* --- ヘッダーセクション --- */
.headerSection {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem;
    border-bottom: 1px solid #e5e7eb;
}
.headerContent {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.headerText, .headerImage {
    flex: 1;
}
.headerText .animeAnnounce {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    color: #fff;
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    /*padding-left: .5em;*/
    text-align: center;
    background: #00aba5;
    letter-spacing: .1em;    
}
.headerText .mainTitle {
    font-family: 'Shippori Mincho', serif;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.mainNumber {
    display: block;
    text-align: center;
    line-height: 1.2;
    padding-top: .1em;
    font-size: 3rem;
    border-top: 1px solid;
    border-bottom: 1px solid;
}
.headerText .description {
    font-size: 1.1rem;
    line-height: 1.6;
}
.headerText img {
    margin: 1rem auto;
    max-width: 400px;
    width: 100%;
}
.headerImage img {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- コンテンツセクション --- */
.contentSection {
    padding: 4rem;
    border-bottom: 1px solid #e5e7eb;
}
.contentSection:last-child {
    border-bottom: none;
}
.sectionTitle {
    font-family: 'Shippori Mincho', serif;
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
    color: #1e3a8a;
}
.infoBlock {
    margin-bottom: 1.5rem;
}
.infoBlock .infoTitle {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
    border-left: 4px solid #1e3a8a;
    padding-left: .75rem;
}
.infoBlock .infoText {
    font-size: 1rem;
    line-height: 1.8;
    padding-left: 1rem;
    /*color: #4b5563;*/
}
.infoSubTitle {
    display: inline-block;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 1rem 1rem;
    padding: .4rem .8rem;
    color: #1e3a8a;
    border: 1px solid;
}
.attention {
    font-size: .9rem;
}
.popImg {
    margin: 2rem auto;
    width: 100%;
}

/*dl*/
.descriptionList {
    font-size: 1rem;
    line-height: 1.8;
    padding-left: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
}
.descriptionList dt {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    color: #1e3a8a;
}
.descriptionList dd {
    margin: 0;
}

/* --- 画像グリッド --- */
.imageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin:1rem;
}
.imageGrid img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.imageGrid img:hover {
    transform: scale(1.05);
}

/* --- ボタン --- */
.gradientButton {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 1.4rem auto 0;
    padding: 1rem 1.6rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border-radius: 50px;
    background: linear-gradient(90deg, #3b3e9a, #207ac3, #16b9b7);
    transition: transform 0.2s, box-shadow 0.2s;
}
.gradientButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* --- フッター --- */
.footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
}


/* PC */
@media screen and (min-width: 768px) {

}

/* スマホ */
@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .wrapper {
        margin-top: 2rem;
    }
    .headerSection {
        padding: 1rem;
    }
    .headerContent {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .headerText, .headerImage {
        width: 90%;
    }
    .headerText img {
        width: 80%;
        margin: 1rem auto;
    }
    .headerText .animeAnnounce {
        padding-left: 0;
        font-size: 1.4rem;
    }
    .headerText .mainTitle {
        font-size: 2.2rem;
    }
    .headerText .description {
        font-size: 1rem;
        text-align: left;
    }
    .mainNumber {
        font-size: 2rem;
    }
    .contentSection {
        padding: 3rem 1rem;
    }
    .sectionTitle {
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
    .infoBlock .infoTitle {
        font-size: 1rem;
    }
    .infoBlock .infoText {
        font-size: .9rem;
        line-height: 1.6;
    }
    .descriptionList {
        display: block;
        font-size: .9rem;
    }
    .descriptionList dd {
        margin-bottom:1.5rem;
    }
    .gradientButton {
        width: 90%;
        padding: .6em 1em;
        margin-top:1rem;
    }
    .imageGrid {
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }
}