@charset "utf-8";

/*メディアクエリー
スマホ @media (max-width: 768px)
タブレットのみ @media (min-width:768px) and (max-width:1000px)
タブレット・PC @media (min-width:768px)
PC大 @media (min-width:1200px) 
※上記以外のブレイクポイントは、例外的に設定。その場合はコメントアウトを記載すること。
*/

body { overflow-x: hidden; }

.inline_pc { display:none;}
.inline_sp { display:inline;}
.block_pc { display:none;}
.block_sp { display:block;}
.inline_sp_pad { display:inline;}
.inline_pc_pad { display:none; }

@media screen and (min-width:768px) { /* ブレイクポイントを768pxから640pxに変更 */
  .inline_pc { display:inline;}
  .inline_sp { display:none;}
  .block_pc { display:block;}
  .block_sp { display:none;}
  .inline_sp_pad { display:inline-block;}
  .inline_pc_pad { display:inline-block;}
  .inline_pc_only { display:none; }
}

@media (max-width: 767px) {
  .head-subtext {
    margin-bottom: 0px !important;
  }
  h3 {margin:20px 0 10px 0;}
}


.openbtn span {background-color: #000;}
.contents_wrap_bg { width:100vw; background:url(../img/cross_top_sp.jpg); background-size:100vw; background-repeat:no-repeat; }
@media screen and ( min-width:768px) {
    .contents_wrap_bg { width:100vw; background:url(../img/cross_top_pc.jpg); background-size:100vw 100%; background-repeat:no-repeat; position: absolute;top: 0; }
    
}

.h1_wrap .english { color:#fff; }
.h1_wrap h1 { color:#fff; margin-bottom:0px; }
.h1_wrap strong { color:#000; font-size:24px; line-height:1.5; }
.h1_wrap p { width:70%; margin:0 auto; font-size:16px; line-height:32px; text-align:left; padding:20px 0 40px 0; }
@media screen and ( min-width:768px) {
  .h1_wrap { margin-bottom:0; }
    .h1_wrap h1 { color:#fff; margin-bottom:20px; }
    .h1_wrap strong { font-size:36px; margin-bottom:20px; display:inline-block; line-height:2em; letter-spacing:0.1em; }
    .h1_wrap p { margin:0 auto; text-align:center;  padding:0 0 40px 0;}
}



.button_wrap .button .circle .arrow {
  position: absolute;
  font-size: 13px;
  animation: none;
  transition: transform 0.3s ease;
  color: #000;
  left: 2px;
  top: -6.5pt;
}
.button_wrap .button span {
  width: 95%;
  text-align: left;
  font-size: 16px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  margin-left: 0%;
  display: inline-block;
  padding: 0 14%;
}


/*背景によって、ヘッダーのロゴ、ハンバーガーの色を変更*/
.logo_black { display:none; }
.openbtn span { background-color:#fff; }
.contents_wrap.blue { display:block; width:100%; height:auto; float:left; background: linear-gradient(#fff 0%, #2294ea 100%); }



/*ボタン*/
a:link {text-decoration: none;}
.button_wrap {width: 200px; padding: 0 0 0 0;}
.button_wrap .button {width: 200px; height: 50px; display: flex; align-items: center; background: #000000; color: #ffffff; line-height: 45px;/*float: left; */text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;position: relative;}
.button_wrap .button.link.inline_sp {width: 212px; /*position: relative;*/display: none;}
.button_wrap .button span {/*width: 95%;text-align: left;font-size: 16px; */font-family: "Cormorant Garamond", serif; font-weight: 400;font-style: normal; /*margin-left: 0%;display: inline-block;*/padding: 0 14%;}
.button_wrap .button .circle {position: relative; width: 27px; height: 27px; border-radius: 50%; overflow: hidden; /*display: flex; lign-items: center; justify-content: center; */background: #fff; color: #000; /*float: right; */position: absolute; right: 20px;}
.button_wrap .button .circle .arrow {position: absolute; font-size: 13px; animation: none; transition: transform 0.3s ease; color: #000; left: 2px; top: -6.5pt;}

.button_wrap .button:hover {box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}
.button_wrap .button:hover .circle .arrow {animation: slideArrow 0.7s linear infinite;}

@media screen and ( min-width:768px) {
    .button_wrap {padding: 40px 0 0 100px;}
}



/* 黄色の下線を調整 */
.lineyellowTrigger {
    line-height: 1.5; /* 必要に応じて調整 */
    padding-bottom: 4px; /* 下余白を調整 */
  }
  .lineyellowTrigger::after {
    bottom: 0; /* 親要素の下部に揃える */
  }

  .lineTrigger {
    position: relative;
    display: inline-block; /* インライン要素に確実に適用 */
    opacity: 0; /* 初期状態は非表示 */
  }
  
  .lineTrigger.lineanime {
    animation-name: lineAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  
  .lineTrigger::after {
    content: "";
    position: absolute;
    width: 0;
    height: 12px; /* 黄色い線の太さ */
    bottom: 4px; /* テキストの下に配置 */
    left: 0;
    top: 36px;
    background: #fff000;
    z-index: -1;
  }
  @media screen and (min-width: 768px) {
    .lineTrigger::after {
      content: "";
      position: absolute;
      width: 0;
      height: 16px; /* 黄色い線の太さ */
      bottom: 4px; /* テキストの下に配置 */
      left: 0;
      top: 40px;
      background: #fff000;
      z-index: -1;
    }
  }
  
  
  .lineTrigger.lineanime::after {
    animation: lineExpand 1s forwards;
  }
  
  @keyframes lineExpand {
    from {
      width: 0;
    }
    to {
      width: 100%; /* 全幅に広がる */
    }
  }

p {font-feature-settings: "palt" !important;}

  /*トップ*/
header#header {margin-bottom: 0;z-index: 1;}
.dummy {height:0px}
.contents_wrap_header{ background-color: #005BA9; display: inline-block; width: 100%; height: fit-content;}
.contents_wrap_bg .h1_wrap  { text-align: center; }
.contents_wrap_bg .h1_wrap h1.lineTrigger { width: auto; display: inline-block; margin-top: 80px; color: rgba(0, 80, 146); line-height: 56px; font: normal normal bold 28px/2em 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ','ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', Times, sans-serif; white-space: nowrap; position: relative; font-feature-settings: "palt";letter-spacing: 0.1em;}
.contents_wrap_bg .h1_wrap p { padding: 20px 0; }
.flex_wrap { display: flex; align-items: stretch; flex-direction: column-reverse; width: 90%; margin: 0 5%; }
.flex_wrap .bg_ { display: flex; align-items: center; width: auto; padding: 15px; margin-bottom: 16px; }
.flex_wrap .bg_.left_wrap { background-color: #FAF9DD; }
.flex_wrap .bg_.right_wrap { background-color: #DFF6FA; }
.flex_wrap .bg_:first-child { margin-bottom: 0; }
.icon_photo { width: 80px; height: 80px; margin-right: 24px; border-radius: 50%; }
.profile * { display: inline-block; }
.profile .name { font-size: 20px; font-weight: bold; margin-bottom: 4px; }
.profile .name span { font-size: 14px; font-weight: normal; }
.profile p { font-size: 14px; line-height: 1.6em; }
@media screen and (min-width: 768px) {
  .dummy {height:575px}
  .contents_wrap_bg .h1_wrap  { text-align: center; padding-top: 120px; }
  .contents_wrap_bg .h1_wrap h1.lineTrigger { width: auto; display: inline-block; margin-top: 0px; color: rgba(0, 80, 146); line-height: 72px; font: normal normal bold 36px/2em 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ','ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', Times, sans-serif; white-space: nowrap; position: relative; font-feature-settings: "palt";letter-spacing: 0.2em; }
  .contents_wrap_bg .h1_wrap h1 p { padding: 20px 0 40px 0; }
  .flex_wrap { display: flex; justify-content: center; align-items: center; flex-direction:row }
  .flex_wrap .bg_ { display: inline-block; width: 280px; padding: 15px 20px; margin-bottom: 0px; }
  .manoheya_img { width: auto; max-height: 250px; margin: 0 40px; }
  .left_wrap { position: relative; }
  .left_wrap::after { content: ""; position: absolute; top: 20%; right: -40px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #FAF9DD; }
  .right_wrap { position: relative; }
  .right_wrap::before { content: ""; position: absolute; top: 20%; left: -40px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #DFF6FA; transform: rotate(180deg); }
}

/*セクション*/
.section { padding-top: 40px; }
.question { background-color: rgba(0, 80, 146); padding: 16px 0; color: white; text-align: center; font: normal normal bold 18px/2em 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ','ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', Times, sans-serif; }
.answer .line_wrap .line { width: 90%; margin: 5% 5% 0; padding: 5%; }
.answer .line_wrap .line.bg_blue2 { background-color: #ECF4FD; height: min-content;}
.answer .line_wrap .line.bg_blue2  span {line-height: 60px; }
.answer .line_wrap .line.bg_blue { background-color: #DFF6FA; height: min-content;}
.answer .line_wrap .line.bg_blue  span {line-height: 60px; }
.answer .line_wrap .line.bg_yellow { background-color: #FAF9DD;height: min-content; }
.answer .line_wrap .line.bg_yellow span {line-height: 60px; }
.answer .name { font-weight: bold; }
.icon_photo.small { width: 52px; height : 52px; }
.answer .line_wrap p { line-height: 2em; }
.answer .line_wrap p strong { font-weight: bold; color: rgba(0, 80, 146); }
.photo2 { width: 100%; height: 180px; object-fit: cover; object-position: 0% 40%; margin-top: 20px;}
.photo3 { width: 90%; height: 180px; object-fit: cover; object-position: 0% 40%; margin: 20px 5% 0;}
.photo4 { width: 90%; height: 220px; object-fit: cover; object-position: 0% 0%; margin: 20px 5% 0;}
.photo5 { width: 90%; height: 220px; object-fit: cover; object-position: 0% 0%; margin: 20px 5% 0;}
.photo6 { width: 100%; height: 220px; object-fit: cover; object-position: 50% 0%; margin-top: 20px;}
.photo7 { width: 480px; height: auto; object-fit: cover; display: block; margin: 30px auto 0; padding: 0 5%;}
.contents_wrap_last { margin: 80px 0; }
.contents_wrap_last .last_text { font-size: 18px; font-weight: bold; color: rgba(0, 80, 146); margin: 0 5%; }
@media screen and (min-width: 768px) {
  .section { max-width: 1080px; margin: 0 auto; padding-top: 60px; }
  .question { background-color: rgba(0, 80, 146); padding: 16px 0; color: white; text-align: center; font: normal normal bold 22px/2em 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ','ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', Times, sans-serif; }
  .answer .line_wrap {display: flex;}
  .answer .line_wrap .inline_pc.left { display: flex; flex-direction: column; align-items: center; width: fit-content; margin-right: 45px; flex-shrink: 0;}
  .answer .line_wrap .inline_pc.right { display: flex; flex-direction: column; align-items: center; width: fit-content; margin-left: 45px; flex-shrink: 0;}
  .answer .line_wrap .icon_photo { margin-right: 0; }
  .answer .line_wrap .line { display: flex; margin: 0; padding: 20px 30px; }
  .answer .line_wrap { position: relative; margin-top: 40px; }
  .answer .line_wrap .line.bg_blue2.left::before { content: ""; position: absolute; top: 28px; left: 85px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #ECF4FD; transform: rotate(180deg); }
  .answer .line_wrap .line.bg_blue2.right::after { content: ""; position: absolute; top: 28px; right: 85px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #ECF4FD; }
  .answer .line_wrap .line.bg_yellow::before { content: ""; position: absolute; top: 28px; left: 85px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #FAF9DD; transform: rotate(180deg); }
  .answer .line_wrap .line.bg_blue::after { content: ""; position: absolute; top: 28px; right: 85px; box-sizing: border-box; border: 10px solid transparent; border-left: 30px solid #DFF6FA; }
  .photo2 { width: 100%; height: 400px; object-fit: cover; object-position: 0% 40%; margin-top: 40px;}
  .photo3 { width: 400px; height: auto; object-fit: cover; object-position: 100% 0%; margin: 0 0 0 30px;}
  .photo4 { width: 400px; height: auto; object-fit: cover; object-position: 100% 0%; margin: 0 0 0 30px;}
  .photo5 { width: 400px; height: auto; object-fit: cover; object-position: 100% 0%; margin: 0 30px 0 0;}
  .photo6 { width: 100%; height: 500px; object-fit: cover; object-position: 0% 0%; margin: 60px auto;}
  .photo7 { width: 480px; height: auto; object-fit: cover; display: block; margin: 40px auto 0; padding: 0; }
  .contents_wrap_last { max-width: 1080px; margin: 120px auto; }
  .contents_wrap_last .last_text { font-size: 22px; font-weight: bold; color: rgba(0, 80, 146); margin: 0 5%; text-align: center; }
}


/*ボタン*/
.button.link { width: 210px; position: relative; display: inline-block; }
.nextbackbtn { text-align: center; margin-bottom: 80px;}
.nextbackbtn a { position: relative; width: 212px; height: 45px; line-height: 27px; background-color: #000; color: #fff; text-align: center; padding: 9px 5px 9px; font-weight: normal;}
.button span.sp_back { padding-right: 0px; text-align: right;}
.button span { width: 95%; text-align: left; font-size: 16px; font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: normal; margin-left: 5%; display: inline-block; padding: 0 10%; padding-right: 10%; padding-left: 10%; margin-top: 2px;}
.button .arrow { position: absolute; font-size: 13px; line-height: 27px; width: 27px; height: 27px; animation: none; transition: transform 0.3s ease; color: #000; left: 3.5px; margin-top: 1px;}
.button.back .circle { position: relative; width: 27px; height: 27px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; color: #000; float: right; position: absolute; left: 10px;}
@media (min-width: 768px) {
  .nextbackbtn { margin-bottom: 200px;}
  .button span.sp_back { padding-left: 0px; margin-left: 0;}
  .button.back .circle { left: 15px; }
  .button.link .circle { top: 10px;}
  .button:hover .arrow {animation: slideArrowback 0.7s linear infinite;}
  .button:hover { background: #000000; color: #fff; box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}
}

@keyframes slideArrowback {
	0% {
	  transform: translateX(0);
	  opacity: 1;
	}
	50% {
	  transform: translateX(-100%);
	  opacity: 0;
	}
	51% {
	  transform: translateX(100%);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
  }