@charset "UTF-8";

html{
 font-size: 62.5%; /* 16px × 62.5％＝10px*/	
}

body{
 color: #2b2b2b ;
 font-family: "Zen Old Mincho", "Lora,",sans-serif; 
 
 background-image: url(../images/mv_pc.jpg);
 background-position:50% 50%;
 background-size: cover;  
 background-repeat: no-repeat;
 /* 画像の位置を固定 */
	background-attachment: fixed;
}

p{
  margin: 0;
  font-family: "Zen Old Mincho";
  line-height: 1.7;
 }

@media screen and (max-width:830px) {
body{
 background-image:none;
  }  
}

/*---
共通
------*/
.section_inner{
 max-width: 1300px;
 margin: 0 auto;
}

.align_center{
  text-align: center;
}

.wrapper{
  margin-bottom: 130px;
}

.col_2,.col_3{
  display: flex;
  justify-content: space-between;
}

.title{
  margin-bottom: 100px;
  text-align: center;
}

.sub_title{
  font-family: "Zen Old Mincho";
  font-size: 2rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.message{
  font-family: "Zen Old Mincho";
  font-weight: bold;
  font-size: 4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

.lead,.info{
  font-family: "Zen Old Mincho";
  font-weight: normal;
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.rsv_bold{
  font-weight: bold;
}

.rsv_bold a:hover{
  color:#d1b18c
}

h4{
  font-family: "Lora";
  font-weight: bold;
  font-size: 4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

/* スクロールする部分 */
section,.footer{
  position: relative;
  z-index: 5;
}

.pc{
  display: block;
}

.sp{
  display:none;
}

/*-------
共通 tab
--------*/
@media screen and (max-width:830px){
  .section_inner{
    max-width: 700px;
    padding: 0 20px;
   }

  .sub_title{
    font-size: 1.7rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
  }

  .message{
    font-size: 3rem;
    margin-bottom: 30px;
  }

  .wrapper{
    margin-bottom: 80px;
  }

  .title{
    margin-bottom: 70px;
  }

  .sub_title{
    font-size: 1.7rem;
  }

  .lead,.info{
    font-size: 1.5rem;
    text-align: justify;
  }

  h4{
    font-size: 2.4rem;
    margin-bottom: 15px;
  }

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
}

@media screen and (max-width:450px) {
  .message{
    font-size: 2.4rem;
  } 
}

/*-------
共通 sp
--------*/
@media screen and (max-width:390px) {
  .section_inner{
  padding: 0 10px;
 }  

 .message{
  font-size: 2rem;
}
}

/*----------------------
header
-----------------------*/
.header{
  position: fixed;
  top:0;
  background-color: #fff;
  width: 100%;
  max-height: 120px;
  z-index: 200;
}

.logo,.footer_logo{
  max-width: 468px;
  width: 100%;

}

.logo img,.footer_logo img{
  width: 100%;
  height: auto;
}

.header_nav{
  max-width: 1300px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 0;
}

.nav{
  max-width: 585px;
  width: 100%;
}

.nav_menu{
  width: 100%;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.nav_menu li a{
  font-family: Lora;
  font-style: Italic;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  color: #2b2b2b;
  white-space:nowrap;
}

.nav_menu li a:hover{
  color:#d1b18c
}

/*--------
header tab
----------*/
@media screen and (max-width:1330px) {
  .header{
    padding: 0 20px;
  } 
  
  .logo,.footer_logo{
    width: 40%;
  }

  .nav{
    width: 52%;
  }

  .nav_menu li a{
    font-size: 2rem;
  } 
} 

@media screen and (max-width:830px){
  .logo,.footer_logo{
    max-width: 204px;
    width: 100%;
    height: auto;
  }
  
  .nav{
    display: none;
  }

  .header_nav{
    justify-content: start;
    padding: 15px 0;

  }
}

/*-------
header sp
---------*/
@media screen and (max-width:390px){
  .header{
    padding: 0 10px;
  }
}

/* --------------------
HamburgerとG-nav sp
----------------------- */
@media screen and (max-width:830px) {
  .openbtn{
    position: fixed;
    z-index:9999 ;
    right: 20px;
    width: 20px;
    height: 10px;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
  }
  .openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    right:0;
    height: 1px;
    width: 20px;
    background: #2b2b2b;
  }

  .openbtn span:nth-of-type(1){
    top: 0;
  }

  .openbtn span:nth-of-type(2){
    top:5px ;
  }

  .openbtn span:nth-of-type(3){
    top: 10px;
  }
}

.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3){
  top:5px
}

.g_nav{
  position: fixed;
  z-index:100;
  top:49px;
  right: -100%;
  width: 50%;
  height: 100vh;
  background: #fff;
  transition: all 0.6s;
}

.g_nav.panelactive{
 right:0;
}

.g_nav ul{
  position: relative;
  top: 190px;
  z-index:999 ;
  width: 100%;
  text-align: center;

}

.g_nav li{
  list-style: none;
  padding-bottom: 55px;
}

.nav_about_us img{
  width: 100px;
  height: 26px;
}

.nav_service img{
  width: 63px;
  height: 26px;
}

.nav_works img{
  width: 73px;
  height: 30px;
}

.nav_contact img{
  width: 81px;
  height: 29px;
}
/*----------------------
main_visual
-----------------------*/
 .main_visual{
  width: 100%;
  height: 100%;
  max-height: 810px;
} 

.main_visual_img{
  width: 100%;
  height: 810px;
} 

.main_visual_catch_copy{
  position: absolute;
  background-attachment: scroll;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-0);
}

.main_visual_copy{
  font-size: 4rem;
  letter-spacing: 0.125em;
  text-align: center;
  /* 自動改行をなくす */
  white-space: nowrap;
  line-height: 1;
  padding-bottom: 10px;
}

.main_copy{
  font-size: 10rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.125em;
  text-align: center;
  /* 自動改行をなくす */
  white-space: nowrap;

}

/*----------------------
main_visual 微調整からtab
-----------------------*/
@media screen and (max-width:830px){
  .main_visual{
    position: relative;
  }

  .main_visual_img{
    background-image: url(../images/mv_tab.jpg);
    background-position:50% 50%;
    background-size: cover;  
    background-repeat: no-repeat;
    max-width:100%;
    height: 790px;;
  }
 
  .main_visual_copy{
    font-size: 2.4rem;
  }

  .main_copy{
    font-size: 7.5rem;
  }
}

@media screen and (max-width:390px){
  .main_visual_copy{
    font-size: 2.2rem;
  }

  .main_copy{
    font-size: 6.5rem;
  }  
}

/*----------------------
main_visual sp
-----------------------*/
@media screen and (max-width:390px){
.main_visual_img{
  background-image: url(../images/mv_sp.jpg);
    background-position:50% 50%;
    background-size: cover;  
    background-repeat: no-repeat;
  
} 
}

/*----------------------
about us
-----------------------*/
#about_us{
  background:#fdf3de;
  position: relative;
  padding-top: 180px;
  padding-bottom: 180px;
}

.plants_about{
  position: absolute;
  top: 0;
  left: 10px;
  max-width: 318px; 
}

.plants_about img{
  width: 100%;
}

/* 画像にしていて全て大きさが違うため
title imgは個別に記述 */
.about_title img{
  width: 265px;
  height: 71px;
  margin-bottom: 15px;
}

.about_lead{
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em;  
}

.members .info{
  margin-bottom: 30px;
}

/*----------------------
about us 微調整からtab
-----------------------*/
@media screen and (max-width:1465px) {
  .plants_about img{
    width: 70%;  
  }  
}

@media screen and (max-width:1350px){
  #about_us{
    padding-left: 20px;
    padding-right:20px ;
  }
}

@media screen and (max-width:1100px) {
  .plants_about img{
    width: 55%;
  } 
}

@media screen and (max-width:830px){
  #about_us{
    padding:100px 0;
  }
  .about_lead{
    font-size: 1.8rem;
  }

  .plants_about img{
    width: 45%;
  }

  .about_title img{
    width: 190px;
    height: 52px;
    margin-bottom: 10px;
  }

  .about_lead{
    font-size: 1.8rem;
  }  
}

@media screen and (max-width:480px){
  .plants_about img{
    width: 35%;
  }
}

@media screen and (max-width:455px){
  .plants_about{
    left:1px
  }
  .plants_about img{
    width: 28%;
  }
}

/*----------------------
about us_members
-----------------------*/
.card{
  width:calc(( 100% - 40px )/3);
  filter: drop-shadow(5px 2px 5px rgba(0,0,0,0.2));
  display:flex;
  flex-direction: column;
}

.card_img img{
  width: 100%;
}

.profile{
  background: #fff;
  padding: 30px 25px 30px 25px;
  flex-grow: 1;
}

.advisor_name{
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.advisor_copy{
  font-weight: normal;
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.skill{
  margin-left: 20px;
  list-style-position:outside;
}

.skill_title,.skill li{
  font-family: "Zen Old Mincho";
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

/*--------------------------
about us_members 微調整からtab
---------------------------*/
@media screen and (max-width:900px){
  .profile{
    padding: 30px 20px;
  }
}

@media screen and (max-width:830px){
  .members_row{
    width: 70%;
    max-width: 600px;
    margin: auto;
    flex-direction: column;

  }

  .advisor_name{
    font-size: 1.9rem;
  }
  
  .advisor_copy{
    font-size: 1.5rem;
  }
  
 .slick-slide{
    height: 20%;
 }

 /* ここからslickのdot */
 .dots-class button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

.dots-class {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.dots-class li {
  width: 15px;
  height: 15px;
  background-color:transparent;
  border: 1px solid #2b2b2b;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
  transition: background-color .5s ease;
  list-style: none;
}
.dots-class li.slick-active {
  background-color: #2b2b2b;
}
.dots-class li:hover {
  background-color: #2b2b2b;
}
.dots-class li:last-child {
  margin-right: 0;
}  
}

@media screen and (max-width:740px){
  .members_row{
    width: 100%;
    max-width: 420px;
    margin: auto;
  }
}

/*----------------------
service
-----------------------*/
#service{
  position: relative;
  padding-top: 130px;
  background-color: #fff;
}

.chair_service{
  position: absolute;
  right: 80px;
  top: -200px;
  max-width: 235px;
}

.chair_service img{
  width: 100%;
}

.service_title img{
  width: 170px;
  height: 60px;
  margin-bottom: 15px;
}

/*----------------------
service 微調整からtab
-----------------------*/
@media screen and (max-width:1800px) {
  .chair_service{
    top: -160px;
  } 
}

@media screen and (max-width:900px) {
  #service .message{
    padding: 0 20px;
  }
  
}

@media screen and (max-width:830px) {
  #service{
    padding-top: 80px;
  }

  #service .message{
    padding: 0;
  }

  .chair_service{
    right: 60px;
    top: -80px;
    max-width: 160px;
  } 

  .service_title img{
    width: 107px;
    height: 45px;
    margin-bottom: 10px;
  }
}

/*----------------------
service sp
-----------------------*/
@media screen and (max-width:390px) {
  .chair_service{
    right: 20px;
    top: -30px;
    max-width: 99px;
  }
  
  .chair_service img{
    width: 100%;
  }

  
}

/*----------------------
service_organize_plan
-----------------------*/
.organize_plan{
  margin:0 auto 50px;
}

.slider{
  max-width: 800px;
  width: 100%;
  margin: 0 auto 130px;
  padding: 0 30px;
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position:center;/*背景画像の位置を中央に*/
  background-size: cover;/* 背景画像が.slider-item全体を覆い表示   */
}

.fa-circle-chevron-right{
  position: absolute;
  top: 50%;
  left: 100%;
  font-size:2.1rem;
  color: #4d3410;
  cursor: pointer;
}

.fa-circle-chevron-left{
  position: absolute;
  top: 50%;
  left:-21px;
  font-size:2.1rem;
  color: #4d3410;
  cursor: pointer;
}

.container{
  background:linear-gradient(180deg, #fff 50%, #fff 50%, #f9e9db 50%, #f9e9db 100%); 
}

/* 料金と整理収納コース */
.item_container{
  max-width: 1300px;
  margin: 0 auto;
  justify-content: space-around
}

.item{
  width: calc((100% - 72px) /3);
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
}

.item_title{
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 2rem;
  line-height: 55px;
  letter-spacing: 0.04em;
  width: 100%;
  height: 55px;
  border-radius:10px ;
  text-align: center;  
  /* 自動改行をなくす */
  white-space: nowrap;
} 

/* 吹き出しの三角の部分 */
.balloon::after{
  display: block;
  content: "";
  margin: 0 auto; 
  border-style: solid;
  border-color: #efd5b1 transparent transparent transparent;
  border-width: 12px 12px 0 12px; 
  width: 19px;
  margin-bottom: 3px;
}

.color_01{
  background: #efd5b1;
}

.color_02{
 background: #f1c07d;  
}

/* お片付けマイスターの三角 */
.item_container .item:nth-child(2) .balloon::after{
  border-top-color: #f1c07d;
}

.color_03{
  background:#caae88;
}

/* スッキリ理想のインテリアの三角 */
.item_container .item:nth-child(3) .balloon::after{
  border-top-color: #caae88;
}

.item_box{
  width: 100%;
  height: auto;
  border-radius: 0 0 20px 0;
  background: #fff;
  border:2px solid #f9e9db;
  padding: 30px 35px;
  flex-grow: 1;
  
}

.item_sub_title{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
}

.item_price{
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 30px;
  /* 自動改行をなくす */
  white-space: nowrap; 
}

.item_price span{
  font-size: 1.6rem;
}

.item_lead{
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.05em; 
  text-align: justify;
}

.organize_plan_detail{
  background:#f9e9db;
  padding-bottom: 100px;
}

.detail{
  max-width: 1300px;
  margin: 0 auto;
}

.detail_01{
  margin-bottom: 40px;
  padding-left: 40px;
  /* テキストが可変するときに箇条書きの点より
  はみ出ない。 */
  list-style-position:outside ;
}

.item_detail{
  font-family: "Zen Old Mincho";
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.detail_01 li{
    font-family: "Zen Old Mincho";
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }

/*--------------------------------
service_organize_plan 微調整からtab
---------------------------------*/
@media screen and (max-width:1360px) {
  .organize_plan{
    padding: 0 20px;
  }
  .detail{
    padding: 0 20px;
  }  
}

@media screen and (max-width:1100px) {
  .item_box{
    padding: 15px;
  }  
}

@media screen and (max-width:860px) {
  .container{
    padding: 0 20px;
  }
  .item_container{
    flex-direction:column ;
    max-width: 700px;
  } 
  
  .item{
    width:100%;
    text-align: center;
  }
}
@media screen and (max-width:830px) {
  .organize_plan{
    margin-bottom: 30px;
    padding: 0;
  }

  .slider{
    max-width: 800px;
    margin: 0 auto 80px;
    padding: 0;
    height: auto;
  }
  
  /* .item_container{
    max-width: 700px;
  } */
  .container{
    background: #f9e9db ;
    padding-top: 60px;
    margin: 0 auto;
  }

  .item_box{
    padding: 30px 15px; 
  }

  .item{
    width: 100%;
    margin:0 auto 50px;
    flex-direction: column;  
  }

  .item_title{
    font-size: 2rem;
  } 

  .item_price{
    font-size: 2.4rem;
  } 

  .item_price span{
    font-size: 1.4rem;

  }

  .item_detail{
    font-size: 1.5rem;
    text-align: justify;
  }

  .organize_plan_detail{
    padding-bottom: 60px;
  }

  .detail{
    max-width: 700px;
  }

  .detail_01 li{
    font-size: 1.3rem;
    text-align: justify;
  }
}

/*--------------------------------
service_organize_plan sp
---------------------------------*/
@media screen and (max-width:390px) {
  .container{
    padding: 60px 10px 0;
  }

  .detail{
    padding: 0 10px;
  }
}

/*----------------------
service_flow
-----------------------*/
.flow_wrapper{
  width: 100%;
  height: auto;
  background-image: url(../images/ss_flow.jpg);
  background-position:  top right;
  /* containは、画像の縦横比を保ったまま、要素の内側に画像がピッタリ収まるサイズ */
  background-size: 80%;
  background-repeat: no-repeat;
  object-fit: scale-down;
} 

.flow{
  padding-top: 100px;
  margin:0 auto 100px;
} 

.flow_list{
  margin-left:152px;
}

.flow_box{
  margin-bottom: 50px;
  margin-right: 50px;
}

.flow_list .col_2{
  justify-content: flex-start;
}

.flow_list .col_2:last-of-type{
  margin-bottom: 0;
}

.flow_img_sp img{
  width: 100px;
  height: 100px;
}

.flow_img_pc img{
  width: 150px;
  height: 150px;
}

/* テスト */
.flow_img_sp{
  display:none;
}

.flow_box_col_2{
  display: flex;
  width: 100%;
  max-width: 948px;
  align-items: flex-end;
}

.flow_box_col_2 .lead{
  width: 100%;
  max-width: 667px;
  margin-right: 40px;
}

.number{
  font-family: "Lora";
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.flow_menu{
  font-family: "Zen Old Mincho";
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.lead_bold a{
  font-weight: bold;
}

.lead_bold:hover{
  color: #d1b18c;
}

.line_box{
  max-width: 230px;
  
}

.line_btn{
  position: relative;  
}

.line_btn a{
  position: relative;
  display: block;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em; 
  text-align: center; 
  border-radius:30px;
  max-width: 230px;
  width: 100%;
  padding: 15px 40px 15px 65px;
}

.line_btn a::before,
.line_btn a::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.line_btn a::before{
  top:0;
  left:0;
  border: #2b2b2b solid 1px;
  z-index: 1;
}


.line_btn a::after{
  top: 5px;
  left: 6px;
  background-color: #d1b18c;
  transition: 0.5s;
  z-index: 0;
}

.line_btn a span{
  position: relative;
  z-index: 2;
}
  
/* 矢印  */
.line_btn a span::before{
  content:'';
  position: absolute;
  top:50%;
  width: 20px;
  height: 1px;
  background: #2b2b2b;
  transition: all .1s;
  left: -30px;
}

.line_btn a:hover span::before{
  left:-25px;
}

/* 矢印斜め */
.line_btn a span::after{
  content:'';
  position: absolute;
  top:41%;
  left:-17px;
  width: 8px;
  height: 1px;
  background: #2b2b2b;
  transform: rotate(39deg);
  transition: all .1s;
}

.line_btn a:hover span::after{
  left:-12px;
}

.line_btn a:hover::after{
  
  background-color: #d1b18c;
  top:0;
  left: 0;  
}

/*----------------------
service_flow 微調整からtab
-----------------------*/
@media screen and (max-width:1360px) {
  .flow_wrapper .section_inner{
    padding: 0 20px;
  }

  .flow_box_col_2 .lead{
    width: 100%;
    max-width: 600px;
    margin-right:15px;
  }
}

@media screen and (max-width:1250px) {
  .flow_box_col_2 {
    flex-direction: column;
    align-items: stretch;
  }

  .line_btn{
    padding: 20px 0 50px;
  }
}

@media screen and (max-width:830px){
  .flow_wrapper{
    background-size: 90%;
  } 

  .flow{
    padding-top: 60px;
    margin-bottom: 60px;
  } 

  .flow_list{
    margin: 0;
  }

  .flow_box{
    margin-bottom:15px;
    margin-right: 0;
    /* tab-spの時は、こちらの画像を消すため */
    display: none;
  }

  .flow_list .col_2{
    flex-direction: column;
  }

  .flow_img_sp{
    display: block;
  }

  .flow_img_sp img{
    width: 100px;
    height: 100px;
  }

  .flow_img_pc img{
    display: none;
  }

  .flow_box_col_2 .lead{
    width: 100%;
    max-width: 660px;
    margin-right: 0;
  }

  .flow_number{
    text-align: center;
    margin-bottom: 10px;
  }

  .number{
    font-size: 2rem;
  }

  .flow_menu{
    font-size: 1.7rem;
  }

  .line_box{
    margin:10px auto 0;
    text-align: center;  
  }

  .line_btn{
    margin-left: 0;
    padding-bottom: 10px;
    
  }

  .underline{
    border-left:1px solid #2b2b2b;
    height: 35px;
    margin: 13px auto;
  } 
}

/*----------------------
service_flow sp
-----------------------*/
@media screen and (max-width:390px) {
   .flow_wrapper .section_inner{
    padding: 0 10px;
  }
}

  /*----------------------
work
-----------------------*/
#works{
  position: relative;
  padding-top: 180px;
  background-color: #fff;
}

.works_title img{
  width: 167px;
  height: 61px;
  margin-bottom: 15px;
}

.flower_cart{
  position: absolute;
  left:50px;
  top:155px;
}

.flower_cart img{
  width: 260px;
}

.slider_works_wrapper{
  width: 100%;
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position:center;/*背景画像の位置を中央に*/
  background-size: cover;/* 背景画像が.slider-item全体を覆い表示   */
}

/*----------------------
works tab
-----------------------*/
@media screen and (max-width:1100px){
  .flower_cart{
    top:210px;
  }
  
  .flower_cart img{
    width: 200px;
}
}

@media screen and (max-width:830px){
  .slider_works{
    height: 400px !important;
  }

  #works{
    padding-top: 100px;
  }

  .works_title img{
    width: 114px;
    height: 46px;
    margin-bottom: 10px;
  }

  .flower_cart{
    top: 172px;
  }

  .flower_cart img{
    width: 90px;
  }
}

/*----------------------
works sp
-----------------------*/
@media screen and (max-width:390px){
  .flower_cart{
    left: 10px;
  }
  
  .slider_works{
    height: 300px !important;
  }  
}

/*----------------------
contact
-----------------------*/
#contact{
  width: 100%;
  height: auto;
  background-image: url(../images/contact_bg.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: scale-down;
  padding-top: 180px;
  padding-bottom: 180px;
}

.contact_wrapper{
  margin-bottom: 100px;
}

.title_contact img{
  width: 190px;
  height: 67px;
  margin-bottom: 15px;
}

.contact_table{
  width: 100%;
  max-width: 700px;
  margin: 0 auto 40px;
}

.contact_label{
  display: block;
  font-family: "Zen Old Mincho";
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-weight: bold;
  margin-bottom: 20px;
}

.contact_label span{
  color: #f52323;
}

.contact_answer{
  display: block;
  margin-bottom: 20px;
}

.form_text,#form_select{
  border: #2b2b2b 1px solid;
  border-radius:10px;
  width: 100%;
  height: 50px;
  padding-left: 20px;
  background: #fff;
  font-family: "Zen Old Mincho";
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em; 
}

.ct_item{
  position: relative;
}
.ct_item::before {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 20px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.contact_textarea{
  border: #2b2b2b 1px solid;
  border-radius:10px;
  width: 100%;
  height: 100px;
  padding:10px 20px 0;
  background: #fff;
  font-family: "Zen Old Mincho";
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.address_area{
  padding-top: 10px;
  height: 50px;
}

.privacy_policy{
  width:700px;
  max-width:100%;
  margin:0 auto; 
}

.contact_method{
  display:block;
  text-align:center;
  margin-bottom:20px;
  font-size:1.4rem;
  line-height:1.7;
  letter-spacing:0.04em;
}

.pp_btn{
  margin-right:20px;
}

.contact_method a{
  color: #4d96cb;
}

.contact_method a:hover{
  color:#a8a9aa ;

}

.submit_wrap{
  position: relative;
  width: 230px;
  margin: 0 auto;
}

.submit_wrap input{
  display: block;
  font-family: "Zen Old Mincho";
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0.04em; 
  text-align: center; 
  border-radius:30px;
  width: 230px;
  padding: 15px 45px;
  border: #2b2b2b solid 1px;
  

}

.submit_wrap::after{
  content: '';
  position: absolute;
  width: 230px;
  height: 100%;
  border-radius: 30px;
  top: 5px;
  left: 6px;
  background-color: #d1b18c;
  transition: 0.5s;
  z-index: -1;
} 

/* 擬似要素にhoverは効かない(::after:hoverはNG） */
.submit_wrap:hover::after{
  background-color: #d1b18c;
  top:0;
  left: 0; 
} 

/*----------------------
contact tab
-----------------------*/
@media screen and (max-width:830px) {
  #contact{
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .contact_wrapper{
    margin-bottom: 70px;
  }
  
  .title_contact img{
    width: 147px;
    height: 52px;
    margin-bottom: 10px;
  }
  
  .contact_table{
    margin: 0 auto 30px;
  }
  
  .contact_label{
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .form_text,#form_select{
    font-size: 1.6rem;
    height: 45px;
    padding-left: 15px;
  }

  .address_area{
    height: 80px;
  }

  .contact_label,.contact_answer{
    padding: 0 20px;
  }

  .contact_method{
    font-size:1.2rem;
  }

  .contact_textarea{
    font-size: 1.6rem;
  }

  /* お問い合わせ項目の矢印 */
  .ct_item::before {
    right: 40px;
  }

  .privacy_policy{
    padding: 0 20px;
  } 
}

/*----------------------
contact sp
-----------------------*/
@media screen and (max-width:390px) {
  #contact{
    background-image: url(../images/contact_bg_sp.jpg);
    padding-bottom: 100px;
  }

  .contact_label,.contact_answer{
    padding: 0 10px;
  }

  .privacy_policy{
    padding: 0 10px;
  }
}

/*----------------------
footer_img
-----------------------*/
.mv_img{
  height: 400px;
  width: 100%;
}

/*----------------------
footer_img tab
-----------------------*/
@media screen and (max-width:830px) {
  .mv_img{
  background-image: url(../images/mv_tab_footer.jpg);
  background-position:50% 50%;
  background-size: cover;  
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
}

  
}

/*----------------------
footer_img sp
-----------------------*/
@media screen and (max-width:390px) {
  .mv_img{
    background-image: url(../images/mv_sp_footer.jpg);
    background-position:50% 50%;
    width: 100%;
    height: 300px;
}

  
}


/*----------------------
footer
-----------------------*/
.footer{
  background-color: #fff;
  padding: 50px 0 30px;
}

.footer_inner{
  max-width: 1300px;
  margin: 0 auto;
  background-color: transparent; 
}

.footer .col_2{
  align-items: flex-end;
  margin-bottom: 40px;
}
.footer .logo{
  margin-bottom: 50px;
}

.address p{
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.05rem;
}

.address a:hover{
  color:#d1b18c
}

.instagram{
  width: 36px;
  height: 36px;
  margin-right: 50px;
}

.line{
  width: 36px;
  height: 36px;
}

.copyright{
  display: block;
  text-align: center;
  font-family: "Zen Old Mincho";
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

/*----------------------
footer 微調整からtabまで
-----------------------*/
@media screen and (max-width:1300px){
  .footer{
    padding: 30px 20px;
  }
}

@media screen and (max-width:830px) {
  
  .footer .logo{
  margin-bottom: 30px;
}

.address p{
  font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 60px;
}

.instagram{
  width: 30px;
  height: 30px;
}

.line{
  width: 30px;
  height: 30px;
}

.copyright{
  font-size: 1.1rem;
}
}

@media screen and (max-width:700px) {
.footer .col_2{
  display: block;
}

.sns{
  text-align: center;
  margin-bottom: 60px;
}
}

/*----------------------
footer sp
-----------------------*/

@media screen and (max-width:390px){
  .footer{
    padding: 30px 10px;
}

}