@charset "utf-8";

/* -----------------------------------------------------------
　common
----------------------------------------------------------- */

@media screen and (max-width: 960px){}
@media screen and (max-width: 767px){}


/* -----------------------------------------------------------
　MARUGOTO(F-1)
----------------------------------------------------------- */
@media screen and (max-width: 767px){
  .special.marugoto .kv {
    width: 100%;
    height: 0;
    padding: 80% 0 0;
    background: url("../img/special/kv_special_marugoto.jpg") no-repeat center top / 266% 100%;
  }
  .special.marugoto .kv > figure {
    width: 83%;
    max-width: 595px;
    margin: auto;
  }
  .special.marugoto h2 {
    font-size: 35px;
    margin: 0 0 40px;
    padding: 0 0 10px;
  }
  .special.marugoto h2::before {height: 5px;}
  .special.marugoto h2 span {
    font-size: 80px;
    margin: 0 0.5rem;
  }
  .special.marugoto h3 {
    font-size: 28px;
    margin: 0 0 25px;
  }
  .special.marugoto h3 > span {
    font-size: 22px;
  }
  .special.marugoto h4 {
    font-size: 20px;
    margin: 0 0 20px;
  }
  .special.marugoto .detail {
    width: 200px;
    margin: 20px 0 0;
  }
  .special.marugoto .detail p:nth-of-type(1) {
    font-size: 11px;
    margin: 0 0 10px;
  }
  .special.marugoto .detail p:nth-of-type(2) {font-size: 13px;}
  .special.marugoto .sec01 .sec01_left {
    float: none;
    width: 100%;
    margin: 0 0 50px;
  }
  .special.marugoto .sec01 .sec01_left + figure {
    position: static;
    width: 100%;
    margin: 0 0 60px;
  }
  .special.marugoto .sec02 h2 {
    position: relative;
    font-size: 35px;
  }
  .special.marugoto .sec02 .sec02_right {
    float: none;
    width: 100%;
    margin: 0 0 50px;
  }
  .special.marugoto .sec02 .sec02_map { 
    overflow-x: auto;
    margin: 0 0 60px;
  }
  .special.marugoto .sec02 .sec02_map figure {
    position: relative;
    width: 270%;
  }
  .special.marugoto .sec02 .sec02_map figure ul li .map_box {
    position: fixed;
    left: 0;
    right: 0;
    width: 90vw;
    max-width: 400px;
    margin: auto;
    padding: 5%;
  }
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(1) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(2) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(3) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(4) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(5) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(6) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li:nth-of-type(7) .map_box {top: 30%;left: 0;}
  .special.marugoto .sec02 .sec02_map figure ul li .map_box h5 {margin: 0 0 5px;}
  .special.marugoto .sec02 .sec02_map figure ul li .map_box h5 span {font-size: 20px;}
  .special.marugoto .sec02 .sec02_map figure ul li .map_box p {font-size: 12px;}
  .special.marugoto .sec02 .sec02_map figure ul li .map_box .btn_close {
    top: 10px;
    right: 10px;
    font-size: 28px;
  }
  .special.marugoto .sec02 .sec02_map + figure {
    float: none;
    width: 100%;
    transform: translateX(0);
    margin: 0 0 30px;
  }
  .special.marugoto .sec02 .sec02_map + figure + .sec02_right {margin: 0 0 60px;}
  .special.marugoto .sec03 {margin: 0 auto 50px;}
  .special.marugoto .sec03 > .center,
  .special.marugoto .sec04 > .center {margin: 0 0 40px;}
  .special.marugoto .sec03 > .center > h2,
  .special.marugoto .sec04 > .center > h2 {
    display: inline;
    background: linear-gradient(transparent 90%, #306BAC 0%);
    line-height: 1.8;
  }
    
  .special.marugoto .sec03 ul li {
    float: none;
    width: 100%;
    height: 100vw;
    max-height: 375px;
    padding: 20px 0;
    margin: 0 0 8%;
  }
  .special.marugoto .sec03 ul li:not(:nth-of-type(3n)) {margin: 0 0 8%;}
  .special.marugoto .sec03 ul li:last-of-type {margin: 0 0 2%;}
  .special.marugoto .sec03 ul li img {height: 20%;}
  .special.marugoto .sec03 ul li p:nth-of-type(1) {
    font-size: 18px;
  }
  .special.marugoto .sec03 ul li p:nth-of-type(1) span {
    font-size: 90px;
  }
  .special.marugoto .sec03 ul li p:nth-of-type(2) {
    font-size: 18px;
    margin: 0 0 20px;
  }
  .special.marugoto .sec03 ul li h3 {
    font-size: 24px;
    margin: 0 0 20px;
  }
  .special.marugoto .sec03 ul li p.btn_more {height: 50px;}
  .special.marugoto .sec03 ul li p.btn_more a {line-height: 50px;}
  .special.marugoto .sec03 ul + p {font-size: 10px;}
  .special.marugoto .sec04 > .center + p {
    font-size: 22px;
    margin: 0 auto 30px;
  }
  .special.marugoto .sec04 .vision_box {
    padding: 8%;
    margin: 0 0 20%;
  }
  .special.marugoto .sec04 .vision_box h3 {
    font-size: 17px;
    margin: 0 0 5%;
  }
  .special.marugoto .sec04 .vision_box h3 span.pc_cont {display: none;}
  .special.marugoto .sec04 .vision_box h3 span { 
    display: block;
    /*font-size: 70px;*/
    line-height: 1.1;
    margin: 3% 0 0;
    margin: 5% 0 0;
  }
  .special.marugoto .sec04 .vision_box h3 span img {display: inline-block;}
  .special.marugoto .sec04 .vision_box h3 span img:nth-of-type(2) {width:30.5%;margin: 3% auto 0;}
  .special.marugoto .sec04 .vision_box .btn_contact {
    height: 50px;
  }
  .special.marugoto .sec04 .vision_box .btn_contact a {
    font-size: 13px;
    line-height: 50px;
    padding: 0;
  }
}
@media screen and (max-width: 375px){
  .special.marugoto .sec03 ul li p:nth-of-type(1) {
    font-size: 5vw;
  }
  .special.marugoto .sec03 ul li p:nth-of-type(1) span {
    font-size: 26vw;
  }
  .special.marugoto .sec03 ul li p:nth-of-type(2) {
    font-size: 5vw;
    margin: 0 0 7%;
  }
  .special.marugoto .sec03 ul li h3 {
    font-size: 6vw;
    margin: 0 0 5%;
  }
  .special.marugoto .sec03 ul li p.btn_more {height: 13vw;}
  .special.marugoto .sec03 ul li p.btn_more a {line-height: 13vw;}
}

/* -----------------------------------------------------------
  (F-2)
----------------------------------------------------------- */


/* -----------------------------------------------------------
 HISTORY (F-3)
----------------------------------------------------------- */
@media screen and (max-width: 767px){

  .special.history::before {width: 10.6%;}
  .special.history .history_kv {
    background: url("../img/special/kv_special_history.png") no-repeat center top / 266.6% auto;
    width: 100%;
    height: 0;
    padding: 80% 0 0;
    margin: 0 0 12%;
  }
  .special.history .history_kv .box h2 {
    width: 58.5%;
    margin: auto;
  }
  .special.history .histoty_content {
    width: 85%;
  }
  .special.history .histoty_content p.lead {
    margin: 0 0 40px;
    width: 100%;
  }
  .special.history .histoty_content dl dt {
    font-size: 50px;
  }
  .special.history .histoty_content dl dd {
    padding: 10% 0 14.5% 8%;
  }
  .special.history .histoty_content dl dd::before {
    top: 10px;
    left: 9px;
    width: 4px;
  }
  .special.history .histoty_content dl dd.fire::before {height: calc(100% - 14px);}
  .special.history .histoty_content dl:nth-last-of-type(1) dd::before {content: none;}
  .special.history .histoty_content dl dd .figure_box {
    position: static;
    width: 100%;
    max-width: inherit;
  }
  .special.history .histoty_content dl dd figure {
    position: absolute;
    top:0;
    right: 0;
  }
  .special.history .histoty_content dl dd .figure_box figure figcaption {font-size: 10px;}
  
  .special.history .histoty_content dl:nth-of-type(1) dd .figure_box figure.fig-1 {width: 75%;}
  .special.history .histoty_content dl:nth-of-type(1) dd .figure_box figure.fig-2 {width: 100%;}
  .special.history .histoty_content dl:nth-of-type(1) dd .figure_box figure.fig-3 {width: 56%;}
  .special.history .histoty_content dl:nth-of-type(2) dd .figure_box figure.fig-4 {width: 100%;}
  .special.history .histoty_content dl:nth-of-type(2) dd .figure_box figure.fig-5 {width: 77%;}
  .special.history .histoty_content dl:nth-of-type(3) dd .figure_box figure.fig-6 {width: 100%;margin: 0 0 8.3%;}
  .special.history .histoty_content dl:nth-of-type(3) dd .figure_box figure.fig-7 {width: 51%;margin: 0 0 8.3%;}
  .special.history .histoty_content dl:nth-of-type(4) dd .figure_box figure.fig-8 {width: 100%;}
  .special.history .histoty_content dl:nth-of-type(4) dd .figure_box figure.fig-9 {width: 85%;}
  .special.history .histoty_content dl:nth-of-type(4) dd .figure_box figure.fig-10 {width: 51%;}
  
  .special.history .histoty_content dl dd h3 {
    width: 100%;
    margin: 0 0 25px;
  }
  .special.history .histoty_content dl dd h3 span:nth-child(1) {font-size: 15px;}
  .special.history .histoty_content dl dd h3 span:nth-child(2) {font-size: 18px;}
  .special.history .histoty_content dl dd h3 span:nth-child(3) {font-size: 10px;}
  .special.history .histoty_content dl dd h3 + p {
    font-size: 13px;
    width: 100%;
    margin: 0 0 30px;
  }
  .special.history .histoty_content dl dd ul {
    width: 100%;
  }
  .special.history .histoty_content dl dd ul li {
    font-size: 0;
    margin: 0 0 30px;
  }
  .special.history .histoty_content dl dd ul li span {
    display: block;
  }
  .special.history .histoty_content dl dd ul li span:nth-child(1) {
    font-size: 28px;
    width: 100%;
    margin: 0 0 7px;
  }
  .special.history .histoty_content dl dd ul li span:nth-child(2) {
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
    margin: 0;
  }
  .special.history .histoty_content dl dd ul li .figure_box {margin-top: 20px;}
  .special.history .histoty_content dl dd ul li .figure_box figure {margin-bottom: 0;}
  .special.history .histoty_content dl.h_2020 dd {padding-top: 10%;}
  .special.history .histoty_content dl.h_2025 dd {padding-top: 15%;}
  .special.history .histoty_content dl.h_2020 dd p,
  .special.history .histoty_content dl.h_2025 dd p {
    left: 110px;
    margin: 0;
  }
  .special.history .histoty_content dl.h_2020 dd p {
    top: -30px;
    font-size: 18px;
  }
  .special.history .histoty_content dl.h_2025 dd p {
    top: -52px;
    font-size: 20px;
    font-weight: 500;
  }
  .special.history .histoty_content dl.h_2025 dd p span {font-size: 35px;}
  .special.history .histoty_content dl:last-of-type + p {
    font-size: 15px;
    width: 100%;
    margin: 0 0 60px;
  }
  .special.history .nav_history_area {
    display: none;
  }


}
/* -----------------------------------------------------------
  asumiru(F-4)
----------------------------------------------------------- */
@media screen and (max-width: 767px){
  .special.asumiru .kv {
    padding: 16% 0 0;
    margin: 0 0 60%;
    overflow: visible;
  }
  .special.asumiru .kv > figure.kv_effect {
    top: 9%;
    right: 23.5%;
    width: 17%;
    height: auto;
    padding: inherit;
  }
  .special.asumiru .kv > figure.kv_effect img {
    transform: translateY(30px);
  }
  .special.asumiru .kv > figure.kv_effect img {position: static;}
  .special.asumiru .kv .box {
    position: absolute;
    height: 100%;
    padding: 0;
  }
  .special.asumiru .kv .box > figure:nth-of-type(1) {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    width: 71%;
    height: auto;
    margin: auto;
    padding: 0;
  }
  .special.asumiru .kv .box > figure:nth-of-type(3) {
    position: absolute;
    top: 8.6%;
    left: 3%;
    width: 53.3%;
    height: auto;
    padding: 0;
  }
  .special.asumiru .case dl {margin: 0 auto 20%;}
  .special.asumiru .case dl dt {
    width: 92%;
    font-size: 22px;
    border: 4px solid #009FE8;
    margin: 30px auto 0;
    padding: 15px 50px 15px 4%;
  }
  .special.asumiru .case dl dt::before {
    right: 15px;
    width: 20px;
    height: 16px;
    margin: auto;
  }
  .special.asumiru .case dl dt span {
    top: -32px;
    left: 4%;
    width: 150px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }
  .special.asumiru .case dl dd .bg_case > .box {
    position: relative;
    padding: 7% 4% 0;
  }
  .special.asumiru .case dl dd .bg_case .case_l {
    position: static;
    float: none;
    width: 100%;
  }
  .special.asumiru .case dl dd .bg_case .case_r {
    position: static;
    float: none;
    width: 100%;
  }
  .special.asumiru .case dl dd .bg_case h2 {
    font-size: 20px;
    margin: 0 0 4%;
  }
  .special.asumiru .case dl dd .bg_case h2 + p {
    line-height: 1.8;
    margin: 0 0 10%;
  }
  .special.asumiru .case dl dd .bg_case figure {
    float: none;
    width: 100%;
    padding: 0 0 7%;
  }
  .special.asumiru .case dl dd .bg_case figure:nth-of-type(1) {margin-right: 0;}
  .special.asumiru .case dl dd .bg_case .case_l + figure {
    position: static;
    width: 70%;
    margin: auto;
    padding: 0;
  }
  .special.asumiru .case dl dd .bg_case .case_r + figure {
    position: static;
    width: 70%;
    margin: auto;
    padding: 0;
  }
  /*case03*/
  .special.asumiru .case.case3 dl dd .bg_case .case_l + figure {
    width: 100%;
  }
  .special.asumiru .case2 dl dd .bg_case .case_r + figure {width: 100%;}
  .special.asumiru .case2 dl dd .bg_case .case_r + figure img {
    width: 125%;
    transform: translateX(-10%);
    max-width: inherit;
  }

  .special.asumiru .case dl dd .bg_case_btn .box {padding: 10% 5%;}
  .special.asumiru .case dl dd .bg_case_btn .case_btn {
    width: 100%;
    height: 50px;
  }
  .special.asumiru .case dl dd .bg_case_btn .case_btn a {
    line-height: 50px;
    font-size: 18px;
    border-radius: 5px;
  }
}