@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');







/*
  font-family: "Noto Sans JP", sans-serif;
  font-family: "Inter", sans-serif;
  font-family: "Oswald", sans-serif;
  font-family: "Barlow", sans-serif;
  font-family: "Barlow Condensed", sans-serif;

	Thin 100
  ExtraLight 200
	Light 300
	Regular 400
	Medium 500
	Semi-bold 600
	Bold 700
	Extra-bold 800
	Black 900
*/




/* CSS Document */

:root {
  --header-height: 80px;
  --header-height-plus: calc(var(--header-height) + 80px);
  --scroll-padding: calc(var(--header-height) + 60px);
  --font-eng-grade: "Barlow Condensed", sans-serif;

  --eng-grade-txt: linear-gradient(90deg, #008EB3 0%, #004EB3 100%);
  --bg-grade01: linear-gradient(270deg, #004EB3 0%, #008EB3 100%);
  --bg-grade02: linear-gradient(314deg, #004EB3 0%, rgba(0, 78, 179, 0) 100%);
  --bg-grade03: linear-gradient(90deg, #008EB3 0%, #004EB3 100%);
  --bg-grade04: linear-gradient(180deg, rgba(243, 252, 255, 0) 0%, rgba(243, 252, 255, 0.59) 84%, rgba(243, 252, 255, 0.70) 100%);
  --bg-grade05: linear-gradient(270deg, #008EB3 0%, #004EB3 100%);
  --bg-grade06: linear-gradient(270deg, rgba(243, 252, 255, 0.70) 50%, rgba(243, 252, 255, 0) 100%);


  
  --radius100: 100px;
  --radius35: 35px;
  --radius20: 20px;
  --radius10: 10px;

  --space-section-170: 170px;
  --space-section-160: 160px;
  --space-section-150: 150px;
  --space-section-140: 140px;
  --space-section-100: 100px;
  --space-section-80: 80px;
  --space-section-60: 60px;
  --space-section-50: 50px;
  --space-section-40: 40px;
  --space-section-35: 35px;
  --space-section-30: 30px;
  --space-section-25: 25px;
  --space-section-20: 20px;
  --space-section-15: 15px;
  --space-section-10: 10px;
}
@media (width <= 1440px) {
  :root {
    --header-height: 80px;
    --header-height-plus: calc(var(--header-height) + 80px);
    
    --radius100: clamp(30px, 3.5vw, 50px);
    --radius35: clamp(15px, 1.4vw, 20px);
    --radius20: clamp(10px, 1vw, 15px);
    --radius10: 10px;

    --space-section-170: clamp(85px, 11.5vw, 170px);
    --space-section-160: clamp(80px, 11vw, 160px);
    --space-section-150: clamp(75px, 10.5vw, 150px);
    --space-section-140: clamp(70px, 10vw, 140px);
    --space-section-100: clamp(50px, 7vw, 100px);
    --space-section-80: clamp(40px, 5.5vw, 80px);
    --space-section-60: clamp(30px, 4.2vw, 60px);
    --space-section-50: clamp(25px, 3.5vw, 50px);
    --space-section-40: clamp(20px, 2.8vw, 40px);
    --space-section-35: clamp(18px, 2.4vw, 35px);
    --space-section-30: clamp(15px, 2.1vw, 30px);
    --space-section-25: clamp(12px, 1.8vw, 25px);
    --space-section-20: clamp(10px, 1.4vw, 20px);
    --space-section-15: clamp(8px, 1vw, 15px);
    --space-section-10: clamp(6px, .7vw, 10px);
  }
}
@media (width <= 767px) {
  :root {
    --scale-sp: 25.641vw; /* 100 / 390 */
    --header-height: 70px;
    --header-height-plus: calc(var(--header-height) + 40px);
  
    --space-section-170: min(170px, calc(170 * var(--scale-sp) / 100));
    --space-section-160: min(160px, calc(160 * var(--scale-sp) / 100));
    --space-section-150: min(150px, calc(150 * var(--scale-sp) / 100));
    --space-section-140: min(140px, calc(140 * var(--scale-sp) / 100));
  
    --space-section-100: min(100px, calc(100 * var(--scale-sp) / 100));
    --space-section-80: min(80px, calc(80 * var(--scale-sp) / 100));
    --space-section-60: min(60px, calc(60 * var(--scale-sp) / 100));
    --space-section-50: min(50px, calc(50 * var(--scale-sp) / 100));
  
    --space-section-40: min(40px, calc(40 * var(--scale-sp) / 100));
    --space-section-35: min(35px, calc(35 * var(--scale-sp) / 100));
    --space-section-30: min(30px, calc(30 * var(--scale-sp) / 100));
    --space-section-25: min(25px, calc(25 * var(--scale-sp) / 100));
  
    --space-section-20: min(20px, calc(20 * var(--scale-sp) / 100));
    --space-section-15: min(15px, calc(15 * var(--scale-sp) / 100));
    --space-section-10: min(10px, calc(10 * var(--scale-sp) / 100));
  }
}


html {
  font-size: 10px;
  scroll-behavior: smooth;
}
body {
  position: relative;
  font-size: 1rem;
  letter-spacing: .1em;
  line-height: 1.8;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: #333333;
  background: #F5F5F5;
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  -ms-font-feature-settings: "palt";
  -o-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /*-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;*/
}
@media screen and (max-width: 940px) {
}
@media (width <= 767px) {
  html {
    font-size: 62.5%;
  }
}


* {
  font-style: normal;
  font-weight: 400;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #3c1d07;
  text-decoration: none;
  transition: .5s;
}
a:hover {
  color: #666666;
  text-decoration: none;
  transition: .5s;
  opacity: 0.65;
}
main a {
  color: #3c1d07;
  text-decoration: none;
  transition: .5s;
}
main a:hover {
  color: #666666;
  text-decoration: none;
  transition: .5s;
  opacity: 0.65;
}
a:hover img,
a.opacity:hover,
footer footer_in .f_contents section dl a:hover {
  text-decoration: none;
  opacity: 0.65;
  zoom: 1;
}
header h2 a:hover img,
footer dl dt a:hover img {
  opacity: 1.0;
  zoom: 1;
}
a:before,
a:after,
a:hover:before,
a:hover:after {
  text-decoration: none !important;
  display: inline-block;
}
img {
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
/*共通*/
.sp,
.sp_img {
  display: none;
}
@media screen and (max-width: 767px) {
  img {
    max-width: none;
    width: 100%;
    height: auto;
  }

  .pc {
    display: none;
  }

  .sp,
  .sp_img {
    display: block;
  }
}






/*	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	behavior: url("/css/PIE.htc");*/

/*
:after {
	content: " ";
	font-size: 0.1rem;
	display: block;
	clear: both;
	line-height: 0;
	height: 0;
	visibility: hidden;
}
span:before {
	font-family: "FontAwesome";
	content: "\f090";
}
span:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0c8";
}
span:before {
  font-family: "Font Awesome 6 Brands";
	font-family: "Font Awesome 6 Free";
	content: "\f0c8";
  font-weight: 400;
  font-weight: 900（Solid）
  font-weight: 400（Regular、Brands）
}
.child {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.child {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
左から
.vertical-rl {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
右から
.vertical-rl {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-lr;
	-o-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
}
.vertical-tb {
	-ms-writing-mode: lr-tb;
	-webkit-writing-mode: horizontal-tb;
	-o-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
}
body {
  counter-reset: number;
}
h1:before {
  counter-increment: number;
  content: counter(number)'';
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<p><picture>
  <source media="(max-width: 767px)" srcset="">
  <img src="" alt="">
</picture></p>

*/






/*header*/
body > h1 {
  display: none;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  padding: 0 60px;
}
header h2 {
  margin-right: 20px;
  width: 160px;
}
header nav {
  margin-left: auto;
  height:100%;
}

header nav > ul {  
  display: flex;
  height:100%;
  font-size: 1.6rem;
  letter-spacing: .1em;
  gap: 3.5em;
}
header nav > ul > li {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
header nav > ul > li::before{
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}
header nav > ul > li > a ,
header nav > ul > li > span {  
  position:relative;
  z-index:2;
  color: #333333;
  font-weight: 500;
  display: block;
  cursor: pointer;
}
header nav > ul > li > span {  
	position:relative;
	display:flex;
	align-items:center;
	padding-right:1.2em;
	cursor:pointer;
}

header nav > ul > li > span::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid #008EB3;
  border-bottom:2px solid #008EB3;
  transform-origin:center;
  transform:translateY(-80%) rotate(45deg);
  transition:transform .3s;
}
header nav > ul > li:hover > span::after{
  transform:translateY(-20%) rotate(-135deg);
}
header nav > ul > li > ul {
  position:absolute;
  top:100%;
  left:0;
  z-index:10;
  background:#FFF;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:
    opacity .25s ease,
    transform .25s ease;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  will-change:opacity,transform;
  box-shadow: 0 8px 12px rgba(0,0,0,.15);
}
header nav > ul > li:hover > ul {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
header nav > ul > li:hover > ul li:not(:last-of-type) {
  border-bottom: solid 1px #E6E6E6;
}
header nav > ul > li > ul li a {
  position: relative;
  display: block;
  padding: .8em 1.5em;
  padding-right: 3.75em;
  color: #008EB3;
  font-weight: 500;
  white-space: nowrap;
  transition:.3s;
}
header nav > ul > li > ul li a::after {
  position:absolute;
  top:50%;
  right:1em;
  width:.5em;
  height:.5em;
  border-top:2px solid #008EB3;
  border-right:2px solid #008EB3;
  transform:translateY(-50%) rotate(45deg);
  transition:.3s;
  content:'';
}
header nav > ul > li:hover > ul li a:hover {
  background: linear-gradient(90deg, #008EB3 0%, #004EB3 100%);
  color: #FFF;
}
header nav > ul > li:hover > ul li a:hover::after {
  border-top:2px solid #FFF;
  border-right:2px solid #FFF;
}

.menu-btn{
  display:none;
}
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:150;
}
@media (width <= 940px) {
  header {
    padding: 0 var(--space-section-40);
  }
  header h2 {
    margin-right: var(--space-section-20);
  }
  header nav > ul {  
    gap: 2.0em;
  }
}
@media (width <= 768px) {


  .overlay.active{
    opacity:1;
    visibility:visible;
  }
  body.menu-open{
    overflow:hidden;
  }

  header {
    height: var(--header-height);
    padding: 0 var(--space-section-10);
    padding-right: var(--space-section-25);
  }
  header h2 {
    margin-right: 0;
    width: 130px;
  }

  header nav{
    position:fixed;
    top:var(--header-height);
    right:0;
    width:min(85%,320px);
    height:calc(100vh - var(--header-height));
    background:#fff;
    transform:translateX(100%);
    transition:.35s;
    overflow-y:auto;
    z-index:200;
    padding: 0 var(--space-section-40);
  }
  header nav.active{
    transform:translateX(0);
  }
  header nav > ul{
    flex-direction:column;
    gap:0;
    height:auto;
  }  
  header nav > ul > li{
    flex-direction:column;
    align-items:flex-start;
    height:auto;
    border-bottom:1px solid #eee;
  }  
  header nav > ul > li > a,
  header nav > ul > li > span{
    padding:18px 20px;
    width:100%;
  }
  
  /* accordion */
  header nav > ul > li > ul{
    position:static;
    width: 100%;
    max-height:0;
    opacity:1;
    visibility:visible;
    transform:none;
    overflow:hidden;
    transition:max-height .3s ease;
    background: none;
    box-shadow:none;
    border-radius:0;
    padding-left: var(--space-section-30);
  }  
  header nav > ul > li.active > ul{
    max-height:9999px;
  }
  header nav > ul > li:hover > ul li:not(:last-of-type) {
    border-bottom: none;
  }
  header nav > ul > li > ul li a {
    padding: .6em 0;
    font-size: 1.4rem;
    color: inherit;
  }
  header nav > ul > li > ul li a::after {
    content: none;
  }
  header nav > ul > li:hover > ul li a:hover {
    background: none;
    color: inherit;
  }
  header nav > ul > li:hover > span::after{
    transform:translateY(-80%) rotate(45deg);
  }
  header nav > ul > li.active > span::after{
    transform:translateY(-20%) rotate(-135deg) !important;
  }
  
  .menu-btn{
    display:block;
    margin-left:auto;
    width:25px;
    height:24px;
    background:none;
    border:none;
    position:relative;
    z-index:300;
    cursor:pointer;
  }  
  .menu-btn span{
    position:absolute;
    left:50%;
    height:2px;
    background:#333;
    transform:translateX(-50%);
    transition:.3s;
  }  
  .menu-btn span:nth-child(1){top:0;width:24px}
  .menu-btn span:nth-child(2){top:10.5px;width:24px}
  .menu-btn span:nth-child(3){top:22px;width:16px;left:calc(50% - 4px)}  
  .menu-btn.active span:nth-child(1){
    top:12px;transform:translateX(-50%) rotate(45deg)
  }
  .menu-btn.active span:nth-child(2){opacity:0}
  .menu-btn.active span:nth-child(3){
    width:24px;
    left:50%;
    top:12px;
    transform:translateX(-50%) rotate(-45deg)
  }
}
@media (width <= 430px) {
  header nav{
    width:100%;
  }  
}



/*footer*/
footer {
  background: #282828;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 100px 20px 50px;
}
footer .box {
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin-bottom: 80px;
}
footer .box .box_l {
  padding-top: 50px;
  margin-right: 50px;
}
footer .box .box_l * {
  color: #FFF;
}
footer .box .box_l .f_logo {
  width: 130px;
  margin-bottom: 40px;
}
footer .box .box_l address {
  font-size: 1.6rem;
  color: #FFF;
  margin-bottom: 2.2em;
}
footer .box .box_l ul {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}
footer .box .box_l ul li {
  width: 30px;
}
footer .box .box_l .f_btn p a .common-btn-txt {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .16em;
  padding: 1.2em 7.5em;
  white-space: nowrap;
}
footer .box .box_r {
  margin-left: auto;
}
footer .box .box_r .calender-title {
  font-size: 2.0rem;
  margin-bottom: .4em;
  color: #FFF;
}
footer .box .box_r .calender {
  width: 400px;
  margin-bottom: 10px;
  font-size: 2.0rem;
  .calendar {
    background: #FFF;
  }
}
footer .box .box_r .holiday-titles .holiday-title {
  position: relative;
  padding: 0;
  font-size: 1.8rem;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: .5em;
}
footer .box .box_r .holiday-titles .holiday-title span {
  display: block;
  width: 1em;
  aspect-ratio: 1;
  background: #FDDDE6;
  border: 1px #CCCCCC solid;
  margin: 0;
  padding: 0;
}
footer .box .box_r .calender-holiday {
  position: relative;
  padding-left: 1.2em;
  font-size: 1.8rem;
  color: #FFF;
}
footer .box .box_r .calender-holiday::before {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  left: 0;
  width: 1em;
  aspect-ratio: 1;
  background: #FDDDE6;
  border: 1px #CCCCCC solid;
  content: '';
}
footer .f_nav {
  display: grid;
  place-items: center;
  margin-bottom: 50px;
}
footer .f_nav ul {
  display: flex;
  gap: 60px;
  font-size: 1.6rem;
}
footer .f_nav ul li {
  position: relative;
}
footer .f_nav ul li:not(:last-of-type)::after {
  position: absolute;
  top: .2em;
  right: calc((-60px + 1px) / 2);
  width: 1px;
  height: calc(100% - (.2em * 2));
  background: #707070;
  content: '';
}
footer .f_nav ul li a {
  color: #FFF;
}
footer small {
  font-size: 1.0rem;
  color: #FFF;
}
.side_btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
  p {
    margin: 0;
    a {
      position: relative;
      width: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #008EB3;
      color: #FFF;
      padding: 2.75em 0 1em;
      border-radius: 10px 0 0 10px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
      font-size: 1.6rem;
      &::before {
        position: absolute;
        top: 1em;
        left: 50%;
        transform: translateX(-50%);
        width: calc(24 / 16 * 1em);
        aspect-ratio: 23 / 24;
        background: url(../img/common/side_icon.svg) center center no-repeat;
        background-size: cover;
        content: '';
      }
      span {
        display: block;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1em;
        white-space: nowrap;
      }
    }
  }
}
@media (width <= 767px) {
  footer {
    padding: var(--space-section-80) var(--space-section-20) var(--space-section-50);
  }
  footer .box {
    flex-direction: column;
    margin-bottom: var(--space-section-50);
  }
  footer .box .box_l {
    display: contents;
  }
  footer .box .box_l .f_logo {
    order: -99;
    width: 130px;
    margin: 0 auto;
    margin-bottom: var(--space-section-40);
  }
  footer .box .box_l address {
    order: 99;
    font-size: 1.4rem;
    margin-bottom: 2.2em;
  }
  footer .box .box_l ul {
    order: 99;
    gap: var(--space-section-40);
    margin-bottom: var(--space-section-40);
  }
  footer .box .box_l ul li {
    width: 30px;
  }
  footer .box .box_l .f_btn {
    order: 99;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer .box .box_r {
    order: -99;
    margin-left: 0;
    margin-bottom: var(--space-section-40);
  }
  footer .box .box_r .calender-title {
    width: min(100%, 480px);
    margin: 0 auto;
    margin-bottom: .4em;
    font-size: 1.6rem;
  }
  footer .box .box_r .calender {
    width: min(100%, 480px);
    margin: 0 auto;
    margin-bottom: var(--space-section-20);
    font-size: 1.8rem;
  }
  footer .box .box_r .holiday-titles .holiday-title {
    font-size: 1.6rem;
  }
  footer .f_nav {
    margin-bottom: var(--space-section-20);
  }
  footer .f_nav ul {
    gap: var(--space-section-40);
    font-size: 1.3rem;
  }
  footer .f_nav ul li:not(:last-of-type)::after {
    right: calc(((var(--space-section-40) * -1) + 1px) / 2);
  }
  footer small {
    font-size: 1.1rem;
  }
  .side_btn {
    p {
      a {
        width: 44px;
        aspect-ratio: 1;
        padding: 0;
        &::before {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        span {
          display: none;
        }
      }
    }
  }
}



main {
  overflow: hidden;
  font-size: 1.6rem;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (width <= 767px) {
  main {
    overflow: hidden;
    font-size: 1.4rem;
    padding-top: var(--space-section-40);
    padding-bottom: var(--space-section-100);
  }
}

/*width*/
.mw1400 {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.mw1200 {
  position: relative;
  width: min(100%, 1240px);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (width <= 767px) {
  .mw1400 {
    padding-left: var(--space-section-20);
    padding-right: var(--space-section-20);
  }
  .mw1200 {
    padding-left: var(--space-section-20);
    padding-right: var(--space-section-20);
  }
}

/*タイトル*/
.title01 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  * {
    display: block;
    line-height: 1em;
  }
  em {
    font-family: var(--font-eng-grade);
    font-size: 7.2rem;
    font-weight: 600;
    letter-spacing: .05em;
    background: var(--eng-grade-txt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: .2em;
  }
  span {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #008EB3;
  }
}
.title02 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  * {
    display: block;
    line-height: 1em;
  }
  span {
    font-size: 4.0rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: .2em;
  }
  em {
    color: #008EB3;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
  }
}
.title03 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  * {
    display: block;
    line-height: 1em;
  }
  span {
    font-size: 4.0rem;
    font-weight: 700;
    margin-bottom: .3em;
  }
  em {
    color: #008EB3;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1em;
  }
}
@media (width <= 767px) {
  .title01 {
    em {
      font-size: clamp(4.8rem, 3rem + 3vw, 7.2rem);
    }
    span {
      font-size: 1.4rem;
    }
  }
  .title02 {
    span {
      font-size: clamp(2.8rem, 2rem + 1.5vw, 4rem);
    }
    em {
      font-size: 1.4rem;
    }
  }
  .title03 {
    span {
      font-size: clamp(2.8rem, 2rem + 1.5vw, 4rem);
    }
    em {
      font-size: 1.4rem;
    }
  }
}


/*共通*/
.common-online {
  width: min(100%, 1200px);
  margin: 0 auto;
  .box {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }
  a {    
    position: relative;
    display: block;
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .3);
      display: block;
      content: '';
    }
    .img img {
      display: block;
      width: 100%;
      height: auto;
      transition: transform .4s ease;
    }
    &:hover .img img {
      transform: scale(1.08);
    }
    .txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      pointer-events: none;
      color: #FFF;
      line-height: 1em;
      white-space: nowrap;
      .box_in {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &::after {
          position: absolute;
          bottom: .2em;
          right: -100px;
          width: 65px;
          aspect-ratio: 1;
          background: url(../img/common/common-online_icon.svg) no-repeat center center;
          background-size: cover;
          content: '';
        }
      }
      .common-online-title {
        font-family: var(--font-eng-grade);
        font-size: 7.2rem;
        font-weight: 600;
        letter-spacing: .05em;
        margin-bottom: .6em;    
      }
      .common-online-txt {
        font-size: 1.8rem;
        font-weight: 500;
        letter-spacing: .16em;
      }
    }
  }
}
@media (width <= 1240px) {
  .common-online {
    width: min(100%, 1240px);
    padding: 0 20px;
    a {
      .txt {
        .common-online-title {
          font-size: clamp(4rem, 2.2rem + 4.5vw, 7.2rem);
        }
        .common-online-txt {
          font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.8rem);
        }
      }
    }
  }
}
@media (width <= 767px) {
  .common-online {
    a {
      .txt {
        .box_in {
          padding-bottom: calc(70 / 390 * 100vw);
          &::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(50 / 390 * 100vw);
          }
        }
        .common-online-title {
          font-size: clamp(3.2rem, 10vw, 4.0rem);
        }
        .common-online-txt {
          font-size: 1.4rem;
          line-height: 1.7;
          text-align: center;
        }
      }
    }
  }
}



.anc {
  display:block;
  position:relative;
  top:calc(var(--scroll-padding) * -1);
  visibility:hidden;
  pointer-events:none;
}
.fade-wrap{
  overflow:hidden;
}
.fade-wrap .fade-up {
  --delay:0s;
  display:block;
  opacity:0;
  transform:
    translate3d(0,1em,0);
  transition:
    opacity 1.2s cubic-bezier(.19,1,.22,1) var(--delay),
    transform 1.2s cubic-bezier(.19,1,.22,1) var(--delay);
  will-change:
    opacity,
    transform;
}
.fade-wrap.is-show .fade-up{
  opacity:1;
  transform:
    translate3d(0,0,0);
}
@media (prefers-reduced-motion:reduce){
  .fade-wrap .fade-up{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.fade-down-up {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.fade-down-up.show {
  opacity: 1;
  transform: translateY(0);
}
.comment p:not(:last-of-type) {
  margin-bottom: 1.2em;
}
.common-btn {
  display: flex;
  p {
    display: flex;
    width: min(100%,320px);
    a {
      position: relative;
      --x: 50%;
      --y: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: 1.6rem;
      overflow: visible;
      .common-btn-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: var(--bg-grade03);
        will-change: transform;
        transform: translateZ(0) scale(1);
        transition: transform .7s cubic-bezier(.19,1,.22,1);
        border-radius: 100vw;
        overflow: hidden;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
        &::after {
          position: absolute;
          top: var(--y);
          left: var(--x);
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgb(255 255 255 / .2);
          transform: translate(-50%,-50%);
          content: '';
          opacity: 0;
        }
        &.is-ripple::after {
          animation: ripple .9s cubic-bezier(.22,1,.36,1);
        }
      }
      &:hover {
        opacity: 1;
      }
      &:hover .common-btn-bg {
        transform: translateZ(0) scale(1.08);
      }
      .common-btn-txt {
        position: relative;
        z-index: 10;
        color: #fff;
        transform: translateZ(0);
        pointer-events: none;
        padding: 1.3em 2em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        letter-spacing: .1em;
        &::after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 2em;
          width: calc(11 / 16 * 1em);
          aspect-ratio: 11 / 18;
          background: url(../img/common/common-btn-arrow.svg) no-repeat center center;
          background-size: cover;
          z-index: 1;
          animation: none;
          content: '';
        }
      }
      &:hover .common-btn-txt::after {
        animation: arrowMove .45s cubic-bezier(.77, 0, .175, 1);
      }
    }
  }
}  
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 520px;
    height: 520px;
    opacity: 0;
  }
}
@keyframes arrowMove {
  0% {
    transform:
      translateY(-50%)
      translateX(0);
    opacity: 1;
  }
  49% {
    transform:
      translateY(-50%)
      translateX(120%);
    opacity: 0;
  }
  50% {
    transform:
      translateY(-50%)
      translateX(-120%);
    opacity: 0;
  }
  100% {
    transform:
      translateY(-50%)
      translateX(0);
    opacity: 1;
  }
}
.wrap-clip {
  overflow-x: clip;
}





/*single用*/
.entry-content {
  line-height: 1.9;
  word-break: break-word;

  > * {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    line-height: 1.4;
  }

  h2 {
    font-size: clamp(2.4rem, 3vw, 3.2rem);
    margin: 2em 0 1em;
    padding-bottom: .4em;
    border-bottom: solid 2px #ddd;
  }

  h3 {
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    margin: 1.8em 0 .8em;
  }

  h4 {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    margin: 1.6em 0 .8em;
  }

  p {
    margin-bottom: 1.5em;
  }

  ul,
  ol {
    margin: 1.5em 0;
    padding-left: 1.5em;

    li {
      margin-bottom: .5em;
    }
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  blockquote {
    margin: 2em 0;
    padding: 1.5em;
    background: #f7f7f7;
    border-left: solid 4px #333;

    p:last-child {
      margin-bottom: 0;
    }
  }

  table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;

    th,
    td {
      padding: 1em;
      border: solid 1px #ddd;
    }

    th {
      font-weight: 700;
      background: #f7f7f7;
    }
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  figure {
    margin: 2em 0;
  }

  figcaption {
    margin-top: .5em;
    font-size: 1.4rem;
    color: #666;
  }

  iframe,
  video {
    max-width: 100%;
  }

  iframe[src*="youtube"],
  iframe[src*="youtu.be"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  a {
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  pre {
    overflow-x: auto;
    padding: 1em;
    background: #f5f5f5;
  }

  code {
    font-family: monospace;
  }

  .alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
  }

  .alignright {
    float: right;
    margin: 0 0 1em 1.5em;
  }

  .aligncenter {
    display: block;
    margin: 2em auto;
  }

  .wp-block-image,
  .wp-block-columns,
  .wp-block-group,
  .wp-block-cover,
  .wp-block-embed,
  .wp-block-video {
    margin-block: 2em;
  }

  @media (width <= 767px) {
    font-size: 1.6rem;

    h2 {
      margin-top: 1.8em;
    }

    h3 {
      margin-top: 1.6em;
    }

    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }

    .alignleft,
    .alignright {
      float: none;
      display: block;
      margin: 2em auto;
    }
  }
}



.wpcf7 {
  form {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
      width: 100%;
      padding: 1em 1em;
      border: 1px solid #ddd;
      border-radius: 0.375em;
      line-height: 1.6;
      background: #fff;
      appearance: none;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
      &:focus {
        border-color: #333;
        box-shadow: 0 0 0 0.125em rgba(0,0,0,.08);
      }

      &::placeholder { color: #aaa; opacity: 1; }
      &::-webkit-input-placeholder { color: #aaa; opacity: 1; }
      &::-moz-placeholder { color: #aaa; opacity: 1; }
      &:-ms-input-placeholder { color: #aaa; opacity: 1; }
      &::-ms-input-placeholder { color: #aaa; opacity: 1; }

      &:focus::placeholder { color: #ccc; }
      &:focus::-webkit-input-placeholder { color: #ccc; }
      &:focus::-moz-placeholder { color: #ccc; }
      &:focus:-ms-input-placeholder { color: #ccc; }
      &:focus::-ms-input-placeholder { color: #ccc; }
    }

    textarea {
      min-height: 12em;
      resize: vertical;
    }

    .wpcf7-form-control.wpcf7-select {
      padding-right: 2.5em;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 6 5-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1em center;
      background-size: 0.875rem;
    }

    .wpcf7-submit,
    input[type="submit"],
    input[type="reset"] {
      display: inline-block;
      padding: 0.9em 4em;
      border-radius: 0.375em;
      cursor: pointer;
      border: none;
      transition: opacity .2s ease, transform .1s ease;
    }
    input[type="submit"],
    .wpcf7-submit {
      background: #111;
      color: #fff;
      &:hover { opacity: .85; }
      &:active { transform: translateY(1px); }
    }
    input[type="reset"] {
      background: #f2f2f2;
      color: #333;
      margin-left: 0.75em;
      &:hover { background: #e6e6e6; }
    }
    
    .wpcf7-radio,
    .wpcf7-checkbox {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625em 1em;
      .wpcf7-list-item { margin: 0; }
      label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        line-height: 1.4;
        position: relative;
        padding-left: 1.625em;
      }
      input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
    }
    
    @media (width <= 768px) {
      .wpcf7-radio,
      .wpcf7-checkbox {
        flex-direction: column;
        gap: 0.5em;
      }
      .wpcf7-submit,
      input[type="submit"],
      input[type="reset"] {
        width: 100%;
        display: block;
      }
      input[type="reset"] {
        margin-left: 0;
        margin-top: 0.75em;
      }
    }
  }
}