@charset "UTF-8";

@font-face{
  font-family: 'noto';
  src: url('../fonts/NotoSansJP-Bold.otf') format('opentype');
  src: url('../fonts/NotoSansJP-Bold.woff') format('woff');
  src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
}
@font-face{
  font-family: 'robo';
  src: url('../fonts/Roboto-MediumItalic_0.ttf') format('truetype');
  src: url('../fonts/Roboto-MediumItalic_0.woff') format('woff');
  src: url('../fonts/Roboto-MediumItalic_0.woff2') format('woff2');
}

/* common setting /////////////////////*/
*{
  box-sizing: border-box;
  font-weight: normal;
}
html{
  scroll-behavior: smooth;
}
body{
  line-height: 1.75;
  font-family: '游ゴシック体', 'Yu Gothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-size: 17px;
  color: #222;
}
img{
  display: block;
  max-width: 100%;
  vertical-align: middle;
}
a,a:visited,a:active,a:hover{
  color: #222;
  transition: 0.2s ease;
  text-decoration: none;
}
.wrap{
  width: 90vw;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
/* heading setting /////////////////////*/
h2{
  font-family: 'noto', sans-serif;
  font-size: 37px;
  text-align: center;
  line-height: 1.5;
}
h2 small{
  display: block;
  font-family: 'noto', sans-serif;
  font-size: 24px;
  text-align: center;
  line-height: 1.5;
}
h2::after{
  content: "";
  display: block;
  width: 80px; height: 4px;
  margin: 40px auto 0;
  background: #4bb38b;
}

/* header /////////////////////*/
header{
  position: relative;
  padding: 15px 0;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
  z-index: 10;
}
header .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header address{
  display: flex;
  align-items: center;
  font-family: 'robo', sans-serif;
  font-size: 40px;
}
header address img{
  width: 50px;
  margin-right: 10px;
}

/* main_visual /////////////////////*/
#main_visual{
  height: 650px;
  background: url("../image/main_img01.png") no-repeat left bottom,url("../image/bg02.png");
}
#main_visual h1{
  padding: 75px 0 0;
}
#main_visual h1 img{
  display: block;
  margin: 0 0 0 auto;
}
#main_visual ul{
  width: 850px;
  display: flex;
  justify-content: space-between;
  margin: 80px auto 0;
}

/* CTA /////////////////////*/
#cta{
  padding: 50px 0 30px;
  background: url("../image/cta_bg.png") no-repeat center center /cover;
  text-align: center;
  position: relative;
}
#cta::before{
  content: "";
  width: 100%; height: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
  position: absolute;
  left: 0; top: 0;
}
#cta::after{
  content: "";
  width: 100%; height: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
  position: absolute;
  left: 0; bottom: 0;
}
#cta .cta_paper{
  padding: 25px 30px 15px;
  border: 20px solid #fff;
  border-radius: 0 0 10px 10px;
  background: url("../image/bg01.png"), #fff;
  position: relative;
}
#cta .cta_paper::before{
  content: "";
  display: block;
  background: url("../image/cta_img01.png") repeat-x;
  width: 1000px;
  height: 20px;
  position: absolute;
  left: -20px; top: -40px;
}
#cta .cta_ribbon{
  display: flex;
  justify-content: center;
}
#cta .cta_ribbon img:nth-child(2){
  margin-left: -10px;
}
#cta h2{
  margin: 20px 0;
}
#cta h2::after{ content: none; }
#cta .cta_text{
  font-weight: bold;
}
#cta .cta_text b{
  font-weight: bold;
  background: linear-gradient(transparent 60%, rgba(209, 189, 150, .4) 60%);
}
#cta .cta_action{
  display: flex;
  justify-content: space-around;
  margin: 30px auto 0;
}
#cta .cta_action p{
  display: flex;
  align-items: center;
  font-family: 'robo', sans-serif;
  font-size: 41px;
}
#cta .cta_action p img{
  width: 50px;
  margin-right: 10px;
}
#cta .cta_action a:hover{
  opacity: 0.8;
  transition: 0.2s ease;
}

/* sec-01 /////////////////////*/
#sec-01{
  padding: 100px 0;
  background: url("../image/sec01_bg01.png") no-repeat left bottom /cover;
  color: #fff;
}
#sec-01 h2{
  margin-bottom: 50px;
}
#sec-01 h2::after{
  background: #7ef0c4;
}
#sec-01 p{
  width: 800px;
  margin: 0 auto;
}
#sec-01 p span{
  background: linear-gradient(transparent 60%, rgba(75, 179, 139, .3) 60%);
}
#sec-01 p span b{
  font-weight: bold;
}
#sec-01 h2.bottom{
  margin: 40px auto 0;
}
#sec-01 h2.bottom::after{
  content: none;
}

/* sec-02 /////////////////////*/
#sec-02{
  padding: 130px 0 100px;
  background: url("../image/bg03.png");
  position: relative;
}
#sec-02::before{
  content: "";
  display: block;
  width: 130px; height: 145px;
  background: url("../image/sec02_icon01.png") no-repeat center center;
  position: absolute;
  left: calc(50% - 65px); top: -50px;
}
#sec-02 h2{
  margin-bottom: 90px;
}
#sec-02 ul{
  display: flex;
  justify-content: space-between;
  text-align: center;
}
#sec-02 ul:nth-of-type(2){
  margin-top: 80px;
}
#sec-02 ul li{
  position: relative;
}
#sec-02 ul li::before{
  content: url("../image/sec02_icon02.png");
  display: block;
  width: 50px; height: 70px;
  position: absolute;
  left: calc(50% - 25px); top: -40px;
}
#sec-02 ul img{
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}
#sec-02 ul p{
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}

/* sec-03 /////////////////////*/
#sec-03{
  padding: 110px 0 100px;
  background: url("../image/sec03_img01.png") no-repeat center top,
  url("../image/bg04.png"),#fff;
}
#sec-03 h2{
  margin-bottom: 60px;
}
#sec-03 p{
  width: 800px;
  margin: 0 auto 40px;
}
#sec-03 p span{
  font-weight: bold;
  background: linear-gradient(transparent 60%, rgba(75, 179, 139, .3) 60%);
}
#sec-03 img{
  margin: 0 auto;
}

/* sec-04 /////////////////////*/
#sec-04{
  padding: 100px 0 70px;
  background: url("../image/bg05.png");
}
#sec-04 h2{
  margin-bottom: 50px;
}
#sec-04 ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sec-04 ul li{
  margin-bottom: 30px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .2));
}

/* sec-05 /////////////////////*/
#sec-05{
  padding: 100px 0;
  background: url("../image/bg04.png"),#fff;
}
#sec-05 .sec05_search{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-top: 70px;
}
#sec-05 .sec05_search section{
  margin-left: 30px;
}
#sec-05 .sec05_search section p{
  margin: 30px 0 40px;
}
#sec-05 .sec05_search section p b{
  font-weight: bold;
}
#sec-05 .sec05_search section h2,
#sec-05 .sec05_search section h2 small{
  text-align: left;
}
#sec-05 .sec05_search section h2::after{
  content: none;
}

/* sec-06 /////////////////////*/
#sec-06{
  padding: 100px 0;
  background: url("../image/bg03.png");
  /* position: relative; */
}
#sec-06 h2{
  margin-bottom: 60px;
}
#sec-06 ul{
  display: flex;
  justify-content: space-between;
}

/* sec-07 /////////////////////*/
#sec-07{
  padding: 100px 0 50px;
  background: url("../image/bg05.png");
}
#sec-07 h2{
  margin-bottom: 70px;
}
#sec-07 ol li{
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  padding: 20px 0 20px 200px;
  margin-bottom: 50px;
  position: relative;
}
#sec-07 ol li:nth-child(4){
  margin-bottom: 40px;
}
#sec-07 ol li::after{
  content: "";
  display: block;
  width: 0; height: 0;
  border-top: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: calc(50% - 10px); bottom: -30px;
}
#sec-07 ol li:last-child::after,
#sec-07 ol li:nth-child(4)::after{
  content: none;
}
#sec-07 ol li img{
  position: absolute;
  left: -10px; top: calc(50% - 25px);
}
#sec-07 ol li h3{
  font-size: 20px;
  font-weight: bold;
}
#sec-07 ol .sec07_free{
  padding: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 40px;
}
#sec-07 ol .sec07_free::after{ content: none; }
#sec-07 ol .sec07_free img{
  position: relative;
  top: auto; left: auto;
  margin: 0 auto;
}

/* sec-08 /////////////////////*/
#sec-08{
  padding: 100px 0;
}
#sec-08 h2{
  margin-bottom: 60px;
}
#sec-08 .wrap{
  max-width: 800px;
}
#sec-08 small{
  display: block;
  margin: 10px 0 60px;
  font-size: 14px;
}

/* sec-09 /////////////////////*/
/* LINE */
#sec-09 .sec09_line{
  padding: 110px 0 80px;
  background: url("../image/sec09_img01.png") no-repeat center top,
  url("../image/bg05.png");
}
#sec-09 .sec09_line h2{
  margin-bottom: 60px;
}
#sec-09 .sec09_line .sec09_line_friend{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
#sec-09 .sec09_line .sec09_line_friend div{
  width: 50%;
}
#sec-09 .sec09_line .sec09_line_friend img{
  margin-left: 50px;
}
#sec-09 .sec09_line .sec09_line_friend div ul{
  margin: 1.5em 0;
  padding-left: 0.3em;
}
#sec-09 .sec09_line .sec09_line_friend div ul li{
  font-weight: bold;
}
#sec-09 .sec09_line .sec09_line_friend div ul li::before{
  content: "\025cf";
  font-size: 10px;
  color: #4bb38b;
  margin-right: 10px;
  vertical-align: middle;
}

/* form */
#sec-09 .sec09_form{
  padding: 100px 0;
  background: url("../image/bg04.png");
}
#sec-09 .sec09_form h2{
  margin-bottom: 35px;
}
#sec-09 .sec09_form_form{
  width: 900px;
  margin: 0 auto;
}
#sec-09 .sec09_form_list{
  padding: 25px 0;
  display: flex;
  align-items: flex-start;
}
#sec-09 .sec09_form_list label,
#sec-09 .sec09_form_list legend{
  width: 250px;
  margin-top: 12px;
  font-weight: bold;
}
#sec-09 .sec09_form_list legend{ display: contents; }
#sec-09 .sec09_form_list .must::before{
  content: '必 須';
  margin-right: 20px;
  padding: 3px 10px;
  background: #c77322;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
#sec-09 .sec09_form_list input,
#sec-09 .sec09_form_list textarea{
  width: 650px;
  padding: 10px 30px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #fff;
}
#sec-09 .sec09_form_list textarea{
  height: 250px;
}
#sec-09 .sec09_form_list input::placeholder,
#sec-09 .sec09_form_list textarea::placeholder{
  color: #ccc;
  font-weight: bold;
}

/* radio button */
#sec-09 .sec09_form_radio li{
  margin-top: 12px;
}
#sec-09 .sec09_form_radio li label{
  margin-left: 14px;
}
#sec-09 .sec09_form_radio input[type="radio"]{
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
}
#sec-09 .sec09_form_radio input[type="radio"]::before{
  display: block;
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #4bb38b;
  opacity: 0;
}
#sec-09 .sec09_form_radio input[type="radio"]:checked::before{
  opacity: 1;
}

/* privacy_policy */
#sec-09 .sec09_form_pp{
  width: 900px;
  height: 260px;
  margin: 35px 0 70px;
  margin-top: 35px;
  padding: 30px 50px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
}
#sec-09 .sec09_form_pp::-webkit-scrollbar{
  width: 8px;
}
#sec-09 .sec09_form_pp::-webkit-scrollbar-track{
  background: #eee;
  border-radius: 4px;
}
#sec-09 .sec09_form_pp::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 4px;
}
#sec-09 .sec09_form_pp h3{
  font-size: 22px;
  font-weight: bold;
}
#sec-09 .sec09_form_pp h4{
  font-size: 17px;
  font-weight: bold;
  margin: 30px 0 10px;
}
#sec-09 .sec09_form_pp ol{
  margin: 0.5em 0 0.5em 1em;
  margin-left: 0.5em;
}
#sec-09 .sec09_form_pp p:last-child{
  margin-top: 1.5em;
}
#sec-09 button{
  display: block;
  width: 470px;
  margin: 0 auto;
}

/* sec-10 /////////////////////*/
#sec-10{
  background: url("../image/bg05.png");
  padding: 100px 0;
}
#sec-10 h2{
  margin-bottom: 60px;
}
#sec-10 ul{
  width: 800px;
  margin: 0 auto;
}
#sec-10 ul li{
  margin-bottom: 30px;
  display: flex;
  border-bottom: 1px solid #ccc;
}
#sec-10 ul li p{
  padding: 0 0 20px 50px;
}
#sec-10 ul li .title{
  width: 200px;
  border-bottom: 2px solid #4bb38b;
  font-weight: bold;
  position: relative;
  bottom: -1px;
}

/* footer /////////////////////*/
footer{
  padding: 50px 0 30px;
  background: #333;
  text-align: center;
}
footer ul{
  display: flex;
  justify-content: center;
  align-items: center;
}
footer ul li:not(:last-child){
  border-right: 1px solid #fff;
}
footer ul li a,
footer ul li a:visited,
footer ul li a:active{
  color: #fff;
  padding: 0 20px;
}

footer ul li a:hover{
  color: #ccc;
}
footer img{
  margin: 40px auto 0;
}
footer small{
  color: #fff;
}

/* thanks /////////////////////*/
#thanks{
  background: url("../image/bg04.png");
  padding: 100px 0;
  text-align: center;
}
#thanks .wrap{
  max-width: 800px;
}
#thanks .mail{
  margin: 0 auto;
}
#thanks h2{
  margin: 30px 0 50px;
}
#thanks address{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'robo', sans-serif;
  font-size: 40px;
}
#thanks address{
  margin: 50px 0;
}
#thanks address img{
  width: 50px;
  margin-right: 15px;
}
#thanks .return_button{
  position: relative;
  display: block;
  width: 400px;
  height: 60px;
  margin: 0 auto;
  padding-top: 15px;
  background: #d1bd96;
  border-radius: 3px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
#thanks .return_button::before{
  content: "";
  display: block;
  width: 8px; height: 8px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 30px; top: 26px;
}
#thanks .return_button:hover{
  opacity: 0.8;
}

/* page_top /////////////////////*/
#page_top{
  width: 54px;
  height: 54px;
  position: fixed;
  right: 30px; bottom: 30px;
  background: #333;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 50;
}
#page_top::before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  left: 16px; top: 21px;
}