@charset "utf-8";
/* ------------------------------------------------------------ common */

#warm_up { min-width: 1200px; margin: 0 auto; font-family: 'Noto-Sans-JP-Regular';}
#warm_up main{ background: #f8f8f2; }
#warm_up area{ border:none; outline:none; }
#warm_up figure{ margin: 0; }

#warm_up a{ display: block; text-decoration: none; }
#warm_up a:hover{ opacity: .8; }

#wrapper{ position: relative; }
#warm_up .SP{ display: none; }

#warm_up .inner{ width: 1100px; margin: 0 auto; padding: 0 50px; box-sizing: content-box; }
#warm_up .s-inner{ width: 1000px; margin: 0 auto; padding: 0 50px; box-sizing: content-box;}
#warm_up .lightbox { display: none; }


/* font */
#warm_up .din{ font-family: din-2014, sans-serif; font-weight: 600; font-style: normal; }
#warm_up .helvetica{ font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }


/* text */
#warm_up .ttl{ position: relative; padding: 0 0 90px; text-align: center; }
#warm_up .catch{ position: absolute; width: 100%; white-space: nowrap; left: 50%; top: -100px; translate: -50% 0; font-size: 250px; font-family: din-2014, sans-serif; font-weight: 600; font-style: normal; color: #fff; }
#warm_up .ja-ttl{ position: relative; }
#warm_up .ja-ttl small{ display: block; padding: 0 0 15px; font-size: 24px; font-family: 'Noto-Sans-JP-Medium'; }
#warm_up .ja-ttl span{ font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; line-height: 150%; }
#warm_up .ja-ttl .en-ttl{ color: #e40057; font-size: 60px; line-height: 1; }

#warm_up .line{ background:linear-gradient(transparent 60%, #fffc1f 60%); }
#warm_up .border{ color: #e40057; border-bottom: 2px solid #e40057; }

#warm_up .triangle{ display: block; clip-path: polygon(0 0, 100% 0, 50% 100%); }

#warm_up .deco{ text-align: center; line-height: 1; }
#warm_up .deco span{ position: relative; padding: 0 30px; font-family: 'Noto-Sans-JP-Bold'; }
#warm_up .deco span:before,
#warm_up .deco span:after{ position: absolute; bottom: 0; content: ""; width: 10px; height: 20px; border-left: 2px solid #000; border-right: 2px solid #000; }
#warm_up .deco span:before{ left: 0; transform: skew(40deg); }
#warm_up .deco span:after{ right: 0; transform: skew(-40deg); }


/* btn */
#warm_up .btn{ width: 550px; margin: 0 auto; text-align: center; background: #e40057; border-radius: 50px; box-shadow: 10px 10px 0px 0px rgba(71,39,21,0.1); z-index: 10; box-sizing: border-box; }
#warm_up .btn a{ overflow: hidden; position: relative; padding: 25px 10px; color: #fff; font-size: 20px; }
#warm_up .btn span{ position: relative; padding: 0 20px; font-family: 'Noto-Sans-JP-Bold'; }
#warm_up .b-arrow span:after{ position: absolute; content: ""; right: 0; top: 50%; translate: 0 -50%; width: 13px; height: 13px; -webkit-mask-image: url(../images/icn/icn_arrow.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(../images/icn/icn_arrow.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: #fff; }

#warm_up .btn.b-yellow{ background: #fffc1f; }
#warm_up .btn.b-yellow a{ color: #000; }
#warm_up .btn.b-yellow a span:after{ background-color: #000; }

#warm_up .btn.b-green{ background: #47c232; }

/* 背景 */
#warm_up .w_box{ background: #fff; box-shadow: 15px 15px 0px 0px rgba(71,39,21,0.1); }
#warm_up .dots { background-color: #ffffff; background-image: radial-gradient(circle, #d9d9d9 1.5px, transparent 1.5px); background-position: 0 0; background-size: 18px 18px; }


/* ------------------------------------------------------------ header */
#warm_up #warm_up_header{ min-width: 1200px; position: fixed; top: 0; left: 0; right: 0; padding: 25px 0; z-index: 100; background: #fff; }
#warm_up #warm_up_header .head_inner{ display: flex; align-items: center; justify-content: space-between; width: 95%; margin: 0 auto; }
#warm_up #warm_up_header .head_inner p{ width: min(280px,20%); }
#warm_up #warm_up_header .head_inner p img{ width: 100%; height: auto; }
.burger_btn{ display: none; }

/* nav */
#warm_up #warm_up_header .nav-wrapper{ width: 970px; }

#warm_up #warm_up_header .nav-list{ display: flex; align-items: center; justify-content: space-between; }
#warm_up #warm_up_header nav li{ float: left; text-align: center; font-family: 'Montserrat', sans-serif; }
#warm_up #warm_up_header nav li.btn{ width: 267px; margin: 0; padding: 0; box-shadow: none; background: #fffc1f; }
#warm_up #warm_up_header nav li.btn a{ color: #000; }
#warm_up #warm_up_header nav li.btn span:after{ background-color: #000; }

#warm_up #warm_up_header nav li a{ position: relative; color: #e40057; padding: 0 10px; font-family: 'ReadexPro'; font-size: 16px; }
#warm_up #warm_up_header nav li a:after{ position: absolute; content: ""; right: 0; top: 50%; transform: rotate(45deg) translate(0,-50%); width: 8px; height: 8px; border-top: 1px solid #e40057; border-right: 1px solid #e40057; }
#warm_up #warm_up_header nav li.btn a{ padding: 20px 0; border: none; font-size: 16px; }
#warm_up #warm_up_header nav li.btn a:after{ display: none; }

#warm_up .link-current{ border-bottom: 2px solid #fff; }


/* ------------------------------------------------------------ cta */
#warm_up .cta{ overflow: hidden; padding: 40px 0 50px; background: #f8f8f1; }
#warm_up .cta .ttl{ padding: 0 0 35px; }
#warm_up .cta .ja-ttl{ padding: 0 0 25px; }
#warm_up .cta .fv-sub{ padding: 0; }
#warm_up .cta .btn{ width: 520px; }
#warm_up .cta .deco{ margin: 0 0 20px; font-size: 20px; }
#warm_up .cta .w_box{ padding: 35px 50px; border-radius: 20px; }

#warm_up .cta_ampersand{ position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 0 35px; }
#warm_up .cta_ampersand:before{ position: absolute; content: "&"; left: 50%; top: 50%; translate: -50% -50%; width: 40px; height: 67px; font-family: din-2014, sans-serif; font-weight: 600; font-style: normal; font-size: 60px; line-height: 1; }

#warm_up .cta_ampersand li{ position: relative; width: 44%; margin: 0 6%; padding: 35px; background: #edfcff; border-radius: 20px; text-align: center; }
#warm_up .cta_ampersand li:before{ position: absolute; content: ""; width: 100px; height: 100px; top: 50%; translate: 0 -50%; background: url(../images/cta/pic_01.png) center/cover no-repeat; }
#warm_up .cta_ampersand li.foreigner:before{ background: url(../images/cta/pic_02.png) center/cover no-repeat; }
#warm_up .cta_ampersand li.bilingual:before{ left: -17%; }
#warm_up .cta_ampersand li.foreigner:before{ right: -17%; }
#warm_up .cta_ampersand li h2{ padding: 0 0 15px; font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; color: #1ea1bb; }
#warm_up .cta_ampersand li small{ display: block; padding: 0 0 25px; font-size: 16px; line-height: 1; }

#warm_up .cta_ampersand .frequency{ display: flex; align-items: center; justify-content: center; }
#warm_up .cta_ampersand .frequency p{ font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; }
#warm_up .cta_ampersand .frequency p strong{ font-size: 60px; font-family: din-2014, sans-serif; font-weight: 600; font-style: normal; color:#000; }
#warm_up .cta_ampersand .frequency .times{ margin: 0 5px; }
#warm_up .cta_ampersand .frequency .times strong{ vertical-align: middle; color:#000; }
#warm_up .cta_ampersand .frequency .count,
#warm_up .cta_ampersand .frequency .count strong{ color: #1ea1bb; }

#warm_up .cta_ampersand li.bilingual{ background: #fff4f8; }
#warm_up .cta_ampersand li.bilingual h2,
#warm_up .cta_ampersand li.bilingual .frequency .count{ color: #e40057; }
#warm_up .cta_ampersand li.bilingual .frequency .count strong{ color: #e40057; }


#warm_up .cta_total{ display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }

#warm_up .pickup{ padding: 0 0 40px; }
#warm_up .pickup h3{ padding: 0 0 28px; font-size: 24px; text-align: center; font-family: 'Noto-Sans-JP-Medium'; }
#warm_up .pickup_wrapper{ padding: 30px 70px; background: #f8f8f1; border-radius: 20px; }
#warm_up .pickup_wrapper .flex{ display: flex; align-items: center; justify-content: center; color: #000; font-family: 'Noto-Sans-JP-Medium'; }
#warm_up .pickup_wrapper .flex div{  display: flex; align-items: center; gap: 24px; width: 50%; }
#warm_up .pickup_wrapper span{ font-size: 20px; line-height: 1.5; }
#warm_up .pickup_wrapper span,
#warm_up .pickup_wrapper span img{ display: block; }

#warm_up .term_wrapper{ width: 630px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
#warm_up .term_wrapper li{ display: flex; align-items: center; gap: 30px; }
#warm_up .term-label{ width: 167px; padding: 8px 15px; text-align: center; font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; color: #000; border: 2px dotted #e40359; box-sizing: border-box; }
#warm_up .term-value{ margin: 0; font-size: 24px; font-family: 'Noto-Sans-JP-Medium'; color: #000; }
#warm_up .term-value strong{ font-size: 50px; font-weight: 500; font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; color:#000;}


/* ------------------------------------------------------------ #warm_up footer */

#warm_up footer { position: relative; padding: 20px 0 50px; border-top: 1px solid #ccc; font-size: 12px; color: #333; text-align: center;}
#warm_up footer a { display: inline-block; color: #333;}
#warm_up footer a:first-child { }
#warm_up footer small { display: block; margin: 0 auto; padding-top: 5px; font-size: 13px;}

#warm_up footer .btn_pagetop { position: absolute; top: -40px; bottom: auto; right: 80px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
#warm_up footer .btn_pagetop a { display: block; width: 40px; height: 80px; background: url(../images/pagetop.png) no-repeat center center /20px;}
#warm_up footer .btn_pagetop a i { width: 20px; height: }
#warm_up footer .sp_view { display: none !important;}




/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
/* ------------------------------------------------------------ common */
#warm_up { min-width: 100%; }
#warm_up .PC{ display: none; }
#warm_up .SP{ display: block; }
#warm_up .inner,
#warm_up .s-inner{ width: 90%; padding: 0; }

/* btn */
#warm_up .btn{ width: 100%; font-size: 13px; box-shadow: 8px 8px 0px 0px rgba(71,39,21,0.1); }
#warm_up .btn a{ padding: 13px 10px; font-size: 13px; line-height: 160%; font-weight: 600; }

/* text */
#warm_up .ttl{ padding: 0 0 30px; }
#warm_up .ja-ttl small{ padding: 0 0 5px; font-size: 17px; line-height: 150%; }
#warm_up .ja-ttl span{ font-size: 25px; line-height: 130%; }
#warm_up .ja-ttl .en-ttl{ font-size: 37px; }

#warm_up .catch{ left: 50%; top: -26px; font-size: 110px; line-height: 80%; white-space: wrap; }

#warm_up .deco span{ padding: 0 20px; }
#warm_up .deco span::before,
#warm_up .deco span:after{ width: 5px; height: 13px; border-left: 1px solid #000; border-right: 1px solid #000; }

/* w_box */
#warm_up .w_box{ box-shadow: 8px 8px 0px 0px rgba(71,39,21,0.1); }

#warm_up .dots{ background-image: radial-gradient(circle, #d9d9d9 1px, transparent 1px); background-size: 11px 11px; }


/* ------------------------------------------------------------ aside */
#warm_up aside.btn{ position: fixed; width: 100%; bottom: 0; left: 0; border-radius: 0; }

/* ------------------------------------------------------------ header */
#warm_up #warm_up_header{ min-width: 100%; padding: 15px 0; background-color: #fff;}
#warm_up #warm_up_header .head_inner p{ width: 110px; }
#warm_up #warm_up_header .head_inner p img{ width: 100%; height: auto; }

#warm_up #warm_up_header .nav-wrapper{ display: none; float: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100vw; background: #fff url(../images/feature/bg_feature.png) center 200px no-repeat; overflow-y: scroll; }

/* nav */
#warm_up #warm_up_header nav{ float: none; width: 90%; margin: 0 auto; padding: 50px 0 70px; background: url(../images/bg_nav02.png) center bottom/100% no-repeat; }
#warm_up #warm_up_header nav li{ float: none; padding: 30px 0 0;  text-align: left; padding: 25px 0 0; font-size: 22px; }
#warm_up #warm_up_header nav li a{ font-weight: 600; color: #e40057; }
#warm_up #warm_up_header nav li a:hover{ border-bottom: none; }
#warm_up #warm_up_header nav li span{ display: block; padding:  15px 0 0; color: #000; font-size: 12px; }

#warm_up #warm_up_header nav li:first-of-type{ width: 100%; padding: 0; }
#warm_up #warm_up_header nav li:nth-of-type(2),
#warm_up #warm_up_header nav li:nth-of-type(3),
#warm_up #warm_up_header nav li:nth-of-type(4),
#warm_up #warm_up_header nav li:nth-of-type(5),
#warm_up #warm_up_header nav li:nth-of-type(6){ width: 100%; }

#warm_up #warm_up_header .logo{ width: 40%; float: none; margin: 0 auto; }
#warm_up #warm_up_header .logo img{ width: 100%; height: auto; padding: 20px 0; }
#warm_up #warm_up_header small{ display: block; padding: 0 0 25px; font-size: 10px; text-align: center; color: #e40057; }

#warm_up #warm_up_header .nav-wrapper{ opacity: 0; visibility: hidden; transition: all 0.5s; }
#warm_up #warm_up_header .btns{ width: 140px; }
#warm_up #warm_up_header .btns .btn{ width: 100%; margin: 0; padding: 0; box-shadow: none; background: #fffc1f; }
#warm_up #warm_up_header .btns .btn a{ padding: 8px 5px; color: #000; font-size: 10px; }
#warm_up #warm_up_header .btns .btn span{ padding: 0 17px; }
#warm_up #warm_up_header .btns .btn span:after{ width: 10px; height: 10px; background-color: #000; }


/* humberger */
#warm_up .burger_btn{ float: right; position: relative; width: 30px; height: 30px; z-index: 200; }
#warm_up .burger_btn span{ position: absolute; left: 0; width: 30px; height: 2px; background: #e40057; }
#warm_up .burger_btn span:first-of-type{ top: 0; transition: all 0.5s; }
#warm_up .burger_btn span:nth-of-type(2){ top: 10px; transition: all 0.5s; }
#warm_up .burger_btn span:last-of-type{ top: 20px; transition: all 0.5s; }


/* active */
#warm_up #warm_up_header .nav-wrapper.active{ opacity: 1; visibility: visible; transition: all 0.5s; }

#warm_up .burger_btn.active span:first-of-type{ top: 10px; transform: rotate(45deg); transition: all 0.5s; }
#warm_up .burger_btn.active span:nth-of-type(2){ opacity: 0; transition: all 0.5s; }
#warm_up .burger_btn.active span:last-of-type{ top: 10px; transform: rotate(-45deg); transition: all 0.5s; }

#warm_up #warm_up_header.colorChangenav .btn{ background: initiel; }
#warm_up #warm_up_header.colorChangenav .burger_btn span{ background: #fff; }
#warm_up #warm_up_header.colorChangenav .burger_btn.active span{ background: #e40057; }

#warm_up .link-current{ border-bottom: none; }


/* ------------------------------------------------------------ cta */
#warm_up .cta{ padding: 20px 0 30px; }
#warm_up .cta .btn{ width: 100%; }
#warm_up .cta .deco{ margin: 0 0 13px; font-size: 12px; }
#warm_up .cta .catch{ font-size: 87px; }
#warm_up .cta .w_box{ padding: 25px 5%; border-radius: 10px; }
#warm_up .cta_ampersand{ flex-direction: column; gap: 50px; }
#warm_up .cta_ampersand::before{ top: 48%; width: 20px; height: 37px; font-size: 30px; }
#warm_up .cta_ampersand li{ width: 100%; height: auto; margin: 0; padding: 20px 5% 20px 24%; box-sizing: border-box; border-radius: 10px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.2); }
#warm_up .cta_ampersand li:before{ top: 23px; width: 75px; height: 75px; translate: 0 -50%; }
#warm_up .cta_ampersand li h2{ padding: 0 0 10px; font-size: 18px; }
#warm_up .cta_ampersand li.bilingual::before{ top: 50%; left: 5%; }
#warm_up .cta_ampersand li.foreigner::before{ top: 50%; left: 5%; right: initial; }
#warm_up .cta_ampersand li small{ display: inline-block; font-size: 12px; text-align: center; }

#warm_up .cta_ampersand .frequency{ text-align: center; }
#warm_up .cta_ampersand .frequency p{ font-size: 17px; font-family: 'Noto-Sans-JP-Medium'; }
#warm_up .cta_ampersand .frequency p strong{ font-size: 32px; color:#000; }
#warm_up .cta_ampersand .frequency .times{ margin: 0 6px; }

#warm_up .cta_total{ display: block; width: 100%; margin: 0 auto 30px;  }
#warm_up .cta_total img{ width: 100%; height: auto; }

#warm_up .pickup{ padding: 0 0 10px; }
#warm_up .pickup h3{ padding: 0 0 20px; font-size: 19px; }
#warm_up .pickup_wrapper{ padding: 25px 5%; border-radius: 10px; }
#warm_up .pickup_wrapper .flex{ flex-direction: column; }
#warm_up .pickup_wrapper .flex div{ gap: 16px; width: 100%; padding: 0 0 15px; }
#warm_up .pickup_wrapper .flex div:last-of-type{ padding: 0; }
#warm_up .pickup_wrapper span{ font-size: 14px; }
#warm_up .pickup_wrapper img{ width: 50px; height: 50px; }

#warm_up .term{ padding: 10px 0 0; }
#warm_up .term_wrapper{ width: 100%; gap: 13px; }
#warm_up .term_wrapper li{ gap: 12px; }
#warm_up .term-label{ width: 80px; padding: 5px; font-size: 15px; line-height: 1.5; }
#warm_up .term-value{ font-size: 14px; }
#warm_up .term-value strong{ font-size: 30px; color:#000; }

/* ------------------------------------------------------------ #warm_up footer */
#warm_up footer { padding: 0 0 70px; border-top: 0px; font-size: 12px; }
#warm_up footer .btn_pagetop { position: relative; top: auto; right: auto; width: 100%; text-align: center; box-shadow: none; background: #f8f0f3; margin-bottom: 10px;}
#warm_up footer .btn_pagetop a { width: 100%; height: auto; color: #ee0055; font-size: 16px; padding: 30px 0; background-position: 30% center;}
#warm_up footer .sp_view { display: block !important;}

  #warm_up .pt25{
    padding-top: 25px !important;
  }
    #warm_up .pb35{
    padding-bottom: 35px !important;
  }
}