@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------------------------------- */
/*共通項目*/
/* -------------------------------------------------------------------------- */
body {
	font-family:Hiragino Kaku Gothic Pro, Meiryo, Osaka, MS PGothic, sans-serif;
	color: #333;
    margin: 0px;
    font-feature-settings : "palt";
   	}


/*フォントサイズ*/
@media (min-width: 1200px) {html {font-size:16px;}}
@media (min-width: 992px) and (max-width:1199px){html {font-size:14px;}}
@media (min-width: 768px) and (max-width:991px) {html {font-size:12px;}}
@media (max-width: 767px) {html {font-size:10px;}}


/*テキストカラー*/
.txt-red  {color:#e60012;}
.txt-white{color:#ffffff;}
.txt-black{color:#333333;}
.txt-pink {color:#ff82ad;}
.txt-blue {color:#293f84;}

/*背景カラー*/
.bg-white  {background:#ffffff!important;}
.bg-gray{background-color:#eeeeee!important;}
.bg-black{background-color:#999999!important;}
.bg-blue{background-color:#d2f1fc!important;}
.bg-green{background-color:#d1ffe4!important;}
.bg-red{background-color:#ffe7e7!important;}
.bg-yellow{background-color:#fffee1!important;}

/*テキストアンダーライン*/
.txt-underline{ text-decoration: underline;}
.txt-border{border: 1px solid;}

/*テキストスタイル*/
.txt-left{text-align:left!important;}
.txt-right{text-align:right!important;}
.txt-center{text-align:center!important;}

/*テキストボールド*/
.txt-bold{font-weight:bold;}


/*ラインカラー・設定*/
hr.line_black{margin-top:10px;margin-bottom:10px;border: 0; border-top: 2px solid #333333;}
hr.line_red{margin-top:10px;margin-bottom:10px;border: 0; border-top: 2px solid #e60012;}

hr.dotline_black{margin-top:10px;margin-bottom:10px;border: 0; border-top: 2px solid #333333;border-style: dotted;}


/*画像*/
img{image-rendering: -webkit-optimize-contrast;}

figure.images100per img{margin: 0 auto 10px auto;padding: 0;width: 100%;}
figure.images60per img{margin: 0 auto 10px auto;padding: 0;width: 60%;}

@media (min-width: 992px){figure.imagesRight img{margin: 0 0 10px 20px;padding: 0;width: 300px;float: right;}}
@media (max-width:991px){figure.imagesRight img{margin: 0 auto 10px auto;padding: 0;width: 100%;}}

@media (min-width: 992px){figure.imagesLeft img{margin: 0 20px 10px 0;padding: 0;width: 300px;float: left;}}
@media (max-width:991px){figure.imagesLeft img{margin: 0 auto 10px auto;padding: 0;width: 100%;}}

@media (min-width: 992px){figure.imagesRight-min img{margin: 0 0 10px 20px;padding: 0;width: 250px;float: right;}}
@media (max-width:991px){figure.imagesRight-min img{margin: 0 0 10px 20px;padding: 0;width: 160px;float: right;}}

@media (min-width: 992px){figure.imagesLeft-min img{margin: 0 20px 10px 0;padding: 0;width: 250px;float: left;}}
@media (max-width:991px){figure.imagesLeft-min img{margin:  0 20px 10px 0;padding: 0;width: 160px;float: left;}}

@media (min-width: 992px){figure.imagesIcon img{margin: 0 0 10px 20px;padding: 0;width: 75px;float: right;}}
@media (max-width:991px){figure.imagesIcon img{margin: 0 0 10px 20px;padding: 0;width: 75px;float: right;}}

@media (min-width: 992px){figure.imagesRight-minimum img{margin: 0 0 10px 20px;padding: 0;width: 160px;float: right;}}
@media (max-width:991px){figure.imagesRight-minimum img{margin: 0 0 10px 20px;padding: 0;width: 140px;float: right;}}

@media (min-width: 992px){figure.imagesLeft-minimum img{margin: 0 20px 10px 0;padding: 0;width: 160px;float: left;}}
@media (max-width:991px){figure.imagesLeft-minimum img{margin: 0 20px 10px 0;padding: 0;width: 140px;float: left;}}

@media (min-width: 992px){figure.imagesRight-minimin img{margin: 0 0 10px 20px;padding: 0;width: 100px;float: right;}}
@media (max-width:991px){figure.imagesRight-minimin img{margin: 0 0 10px 20px;padding: 0;width: 90px;float: right;}}

@media (min-width: 992px){figure.imagesLeft-minimin img{margin: 0 20px 10px 0;padding: 0;width: 100px;float: left;}}
@media (max-width:991px){figure.imagesLeft-minimin img{margin: 0 20px 10px 0;padding: 0;width: 90px;float: left;}}


/*float後のoverflow:hidden*/
.overflow-hidden{overflow: hidden;}


/*float後のclear: both;*/
.clear-both{clear: both;}



/*br/SpPcで改行位置変更 */
/*------PC用　768px以上----------*/
@media (min-width:768px) {  
 .br-pc{ display: block;} 
 .br-sp{ display: none;}
}
/*------SP用　767px以下----------*/
@media (max-width:767px) { 
 .br-pc{ display: none;}
 .br-sp{ display: block;}
}

/*リンク*/
a:link   {color:#0d0dcc;text-decoration:underline;}
a:visited{color:#0d0dcc;text-decoration:underline;}
a:active {color:#0d0dcc;text-decoration:underline;}
a:hover  {color:#0d0dcc;text-decoration:none;}

/*bootstrap打消し*/
.margin-padding0{ margin: 0; padding: 0;}


/*ボタンアニメーション*/
.reflection {
  position: relative;
  overflow: hidden;
}
.reflection::before {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 3s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 3s ease-in-out infinite;
}
@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


/*page-top-----------ページ下部用のCVボタン設置の際、bottom変更*/
#page-top {position: fixed;z-index:1600;}

@media (min-width:992px){#page-top{right: 20px;bottom:10px;font-size: 1.2em;}#page-top a {padding: 8px 15px;}}
@media (max-width:991px){#page-top{right: 15px;bottom:10px;font-size: 1.6em;}#page-top a {padding: 5px 12px;}}
#page-top a {
    background-color: rgba(10,10,10,0.85);
    text-decoration: none;
    color: #fff;
    text-align: center;
    display: block;
	}
    



/* -------------------------------------------------------------------------- */
/*レイアウト*/
/* -------------------------------------------------------------------------- */
/*レイアウト大枠*/
@media (min-width:992px){.wrapper{width: 50%;margin: 0 auto;padding:0;}}
@media (max-width:991px){.wrapper{width: 100%;margin: 0 auto;padding:0;}}
.wrapper figure img{margin: 0 auto 0 auto;padding: 0;width: 100%;}


/*ヘッダー*/
@media (min-width:992px){header{margin: 0 auto;padding:0;}}
@media (max-width:991px){header{margin: 0 auto;padding:0;}}


/*メイン*/
@media (min-width:992px){main{margin: 0 auto;padding:0;}}
@media (max-width:991px){main{margin: 0 auto;padding:0;}}


/*footer*/
@media (min-width:992px){footer {
    width: 100%;
    margin: 0 auto;
    padding: 0;

    /* 背景画像：横幅いっぱいに合わせる */
    background-image: url('../../images/footer-background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;

    /* レイアウト：中身（figure）を下寄せにする */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    /* 高さの設定：コンテンツに応じて可変、最低でも200px確保 */
    height: auto;
    min-height: 200px;
}}
@media (max-width:991px){footer {
    width: 100%;
    margin: 0 auto;
    padding: 0;

    /* 背景画像：横幅いっぱいに合わせる */
    background-image: url('../../images/footer-background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;

    /* レイアウト：中身（figure）を下寄せにする */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    /* 高さの設定：コンテンツに応じて可変、最低でも200px確保 */
    height: auto;
    min-height: 200px;
}}

/* 画像周りの余計な隙間をカット */
footer figure {
    margin-bottom: -17px;
}
footer img {
    display: block;
    max-width: 100%;
    height: auto;
}



/* -------------------------------------------------------------------------- */
/*FV*/
/* -------------------------------------------------------------------------- */
@media (min-width:992px){section .fv{margin: 0 auto;padding:0;}}
@media (max-width:991px){section .fv{margin: 0 auto;padding:0;}}


/* -------------------------------------------------------------------------- */
/*cta*/
/* -------------------------------------------------------------------------- */
@media (min-width:992px){section.cta-default{margin: 10px auto 10px auto;padding: 0px  0px  0px  0px;width: 100%;}}
@media (max-width:991px){section.cta-default{margin: 10px auto 10px auto;padding: 0px  0px  0px  0px;width:  95%;}}


@media (min-width:992px){section.cta-otherGrades{margin: 0 auto;padding:20px 10px 10px 10px;width: 100%;background: #E6E6E6;}}
@media (max-width:991px){section.cta-otherGrades{margin: 0 auto;padding:20px 10px 10px 10px;width: 100%;background: #E6E6E6;}}


@media (min-width:992px){section.cta-custom{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.cta-custom{margin: 0 auto;padding:0;}}

@media (min-width:992px){section.cta-custom .upper{margin: 0 auto;padding:0;
	background-image: url('../../images/cta-custom-background.jpg');

	
    /* 背景画像の設定 */
    background-repeat: no-repeat;    /* 画像を繰り返さない */
    background-position: center;     /* 画像を中央に配置 */
    background-size: cover;          /* 枠いっぱいに広げる（余白を出さない） */
    
    /* コンテンツに応じた余白（適宜調整） */
    padding: 0 0 20px 0;
    width: 100%;
              /* 背景が見えるように最低限の高さを確保 */}}
@media (max-width:991px){section.cta-custom .upper{margin: 0 auto;padding:0;
	background-image: url('../../images/cta-custom-background.jpg');

	
    /* 背景画像の設定 */
    background-repeat: no-repeat;    /* 画像を繰り返さない */
    background-position: center;     /* 画像を中央に配置 */
    background-size: cover;          /* 枠いっぱいに広げる（余白を出さない） */
    
    /* コンテンツに応じた余白（適宜調整） */
    padding: 0 0 20px 0;
    width: 100%;
              /* 背景が見えるように最低限の高さを確保 */}}


@media (min-width:992px){section.cta-custom .lower{margin: 0 auto;padding:0;width: 95%;}}
@media (max-width:991px){section.cta-custom .lower{margin: 0 auto;padding:0;width: 95%;}}

/* -------------------------------------------------------------------------- */
/*セクション*/
/* -------------------------------------------------------------------------- */
@media (min-width:992px){section.section01{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section01{margin: 0 auto;padding:0;}}


@media (min-width:992px){section.section02{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section02{margin: 0 auto;padding:0;}}


@media (min-width:992px){section.section03{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section03{margin: 0 auto;padding:0;}}


@media (min-width:992px){section.section04{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section04{margin: 0 auto;padding:0;}}


@media (min-width:992px){section.section05{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section05{margin: 0 auto;padding:0;}}


@media (min-width:992px){section.section06{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.section06{margin: 0 auto;padding:0;}}

@media (min-width:992px){section.section07{margin: 0 auto;padding:0;
	background-image: url('../../images/sec07-story-background.jpg');

	
    /* 背景画像の設定 */
    background-repeat: no-repeat;    /* 画像を繰り返さない */
    background-position: center;     /* 画像を中央に配置 */
    background-size: cover;          /* 枠いっぱいに広げる（余白を出さない） */
    
    /* コンテンツに応じた余白（適宜調整） */
    padding: 0 0 20px 0;
    width: 100%;
              /* 背景が見えるように最低限の高さを確保 */}}
@media (max-width:991px){section.section07{margin: 0 auto;padding:0;
	background-image: url('../../images/sec07-story-background.jpg');

	
    /* 背景画像の設定 */
    background-repeat: no-repeat;    /* 画像を繰り返さない */
    background-position: center;     /* 画像を中央に配置 */
    background-size: cover;          /* 枠いっぱいに広げる（余白を出さない） */
    
    /* コンテンツに応じた余白（適宜調整） */
    padding: 0 0 20px 0;
    width: 100%;
              /* 背景が見えるように最低限の高さを確保 */}}


@media (min-width:992px){section.section08{margin: 0 auto;padding:0;
	margin: 0 auto;
    padding: 0px 0; /* 上下パディング。左右は0に */
    display: flex;
    flex-direction: column;
    align-items: center;/* 中身を中央に寄せる設定 */

    /* 背景の設定 */
    background-image: 
        linear-gradient(165deg, #A4D8D3 45%, transparent 10%),
        linear-gradient(335deg, #A4D8D3 25%, transparent 25%);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 450px 200px;
    
    min-height: 100px;}}
@media (max-width:991px){section.section08{margin: 0 auto;padding:0;
	margin: 0 auto;
    padding: 0px 0; /* 上下パディング。左右は0に */
    display: flex;
    flex-direction: column;
    align-items: center;/* 中身を中央に寄せる設定 */

    /* 背景の設定 */
    background-image: 
        linear-gradient(165deg, #A4D8D3 45%, transparent 10%),
        linear-gradient(335deg, #A4D8D3 25%, transparent 25%);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 450px 200px;
    
    min-height: 100px;}}


section.section07 ul{margin: 0 auto;padding:0;}


/* -------------------------------------------------------------------------- */
/*thanks*/
/* -------------------------------------------------------------------------- */
@media (min-width:992px){section.thanks{margin: 0 auto;padding:0;}}
@media (max-width:991px){section.thanks{margin: 0 auto;padding:0;}}


/* -------------------------------------------------------------------------- */
/*cta-default*/
/* -------------------------------------------------------------------------- */
.cta-default-button {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 共通設定 */
.cta-default-button .img-btn {
    display: block;
    width: 320px;         /* 画像の横幅 */
    height: 150px;        /* 画像の縦幅 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;     /* 切り替えを滑らかにする */
}

/* ボタン1：通常時とホバー時 */
.cta-default-button .btn-01 {
    background-image: url('../../images/cta-default01-01.png');
}
.cta-default-button .btn-01:hover {
    background-image: url('../../images/cta-default01-02.png');
}

/* ボタン2：通常時とホバー時 */
.cta-default-button .btn-02 {
    background-image: url('../../images/cta-default02-01.png');
}
.cta-default-button .btn-02:hover {
    background-image: url('../../images/cta-default02-02.png');
}


/* -------------------------------------------------------------------------- */
/*cta-otherGrades*/
/* -------------------------------------------------------------------------- */
.cta-otherGrades-button {
    display: flex;
    justify-content: center;
    gap: 8px;       /* 3つの時は間隔を少し狭くすると収まりが良いです */
    flex-wrap: nowrap; /* 3つ横並びを強制 */
}

/* 共通設定 */
.cta-otherGrades-button .img-btn {
    display: block;
    width: calc(33.3% - 8px);/* 3つ並べるために1つあたりの幅を計算（隙間分を引いて約31%） */
	height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
}

/* ボタン1：通常時とホバー時 */
.cta-otherGrades-button .btn-01 {
    background-image: url('../../images/cta-otherGrades01-01.png');
}
.cta-otherGrades-button .btn-01:hover {
    background-image: url('../../images/cta-otherGrades01-02.png');
}

/* ボタン2：通常時とホバー時 */
.cta-otherGrades-button .btn-02 {
    background-image: url('../../images/cta-otherGrades02-01.png');
}
.cta-otherGrades-button .btn-02:hover {
    background-image: url('../../images/cta-otherGrades02-02.png');
}

/* ボタン3：通常時とホバー時 */
.cta-otherGrades-button .btn-03 {
    background-image: url('../../images/cta-otherGrades03-01.png');
}
.cta-otherGrades-button .btn-03:hover {
    background-image: url('../../images/cta-otherGrades03-02.png');
}

/* 【重要】スマホなど画面が狭い時の調整 */
@media (max-width: 900px) {
    .cta-otherGrades-button .img-btn {
        width: 45%;  /* 画面が狭くなったら2つ並び、または1つ並びに調整 */
        height: 80px;
    }
}


/* -------------------------------------------------------------------------- */
/*cta-cta-custom*/
/* -------------------------------------------------------------------------- */
/*1つ並び*/
.cta-cta-custom-button {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
	gap: 8px;
	margin: 0 auto 20px auto;
}

/* 共通設定 */
.cta-cta-custom-button .img-btn {
    display: block;
    /* 2つ並びの設定（隙間分を引いて調整） */
    width: calc(100% - 0px);
    height: 90px;       /* スマホで見やすい高さに調整 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
}

/* ボタン1：通常時とホバー時 */
.cta-cta-custom-button .btn-01 {
    background-image: url('../../images/cta-custom01-01.png'); /* 指定の画像 */
}
.cta-cta-custom-button .btn-01:hover {
    background-image: url('../../images/cta-custom01-02.png');
}



/*2つ並び*/
.cta-cta-custom-button2 {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap; 
}

/* 共通設定 */
.cta-cta-custom-button2 .img-btn {
    display: block;
    /* 2つ並びの設定（隙間分を引いて調整） */
    width: calc(50% - 10px);
    height: 80px;       /* スマホで見やすい高さに調整 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
}

/* ボタン1：通常時とホバー時 */
.cta-cta-custom-button2 .btn-01 {
    background-image: url('../../images/cta-custom02-01.png'); /* 指定の画像 */
}
.cta-cta-custom-button2 .btn-01:hover {
    background-image: url('../../images/cta-custom02-02.png');
}

/* ボタン2：通常時とホバー時 */
.cta-cta-custom-button2 .btn-02 {
    background-image: url('../../images/cta-custom03-01.png'); /* 同じ画像、または別の画像 */
}
.cta-cta-custom-button2 .btn-02:hover {
    background-image: url('../../images/cta-custom03-02.png');
}


/* -------------------------------------------------------------------------- */
/*thanks-top*/
/* -------------------------------------------------------------------------- */
/*1つ並び*/
.thanks-top-button {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
	gap: 8px;
	margin: 0 auto 20px auto;
}

/* 共通設定 */
.thanks-top-button .img-btn {
    display: block;
    /* 2つ並びの設定（隙間分を引いて調整） */
    width: calc(100% - 0px);
    height: 90px;       /* スマホで見やすい高さに調整 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s;
}

/* ボタン1：通常時とホバー時 */
.thanks-top-button .btn-01 {
    background-image: url('../../images/thanks-top01-01.png'); /* 指定の画像 */
}
.thanks-top-button .btn-01:hover {
    background-image: url('../../images/thanks-top01-02.png');
}