@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html{
  font-size: 62.5%;
  box-sizing: border-box;
  background: #fff;
  margin-top: 0 !important;
  width: 100%;
}
body {
  font-family:'Roboto', sans-serif, YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  color: var(--basic);
  text-decoration-line: none;
  font-size: 1.6rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2.6rem;
  text-decoration-line: none;
  text-decoration: none;
  border-bottom: none;
  overflow: initial;
  margin: 0;
}
* {
  box-sizing: border-box;
}
a{
  cursor: pointer;
  text-decoration-line: none;
  text-decoration: none;
  color: var(--basic);
  font-family:'Roboto', sans-serif, YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
a, a:hover, a:active {
  color: var(--basic);
  ext-decoration-line: none;
  text-decoration: none;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

img{
  max-width:100%;
  height: auto;
}
header{
  line-height: inherit;
}
li > ul, li > ol{
  margin-left: 0;
}
li{
  list-style:none;
}
p{
  line-height: 2.6rem;
  font-family:'Roboto', sans-serif, YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
h1,h2,h3,h4,h5{
  font-family:'Cardo', serif, "游明朝体", "Yu Mincho", YuMincho;
}
/*common*/
:root {
  /* 色指定 */
  --basic: #1d304f;
  --basic_l: #1c335a;
  --light: #e9eef7;
  --dark: #727e93;
  --sub_l: #d6bc66;
  --sub_d: #b98700;
  --msjapan: #3d221e;
  --font01: 'Roboto', sans-serif, YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font02: 'Cardo', serif, "游明朝体", "Yu Mincho", YuMincho;
  --grad:linear-gradient(to bottom, #ead694 0%, #d6bc66 4%, #b98700 96%, #deb73d 100%);
  --shadow01: 0px 0px 6px rgba(0, 0, 0, .1);

}
.dn{
  display: none;
}
.dn-sp{
  display: block;
}
.dn-pc{
  display: none;
}
.dn-pc_700{
  display: none;
}
.dn-sp_pro{
  display: block;
}
.dn-pc_pro{
  display: none;
}
.wrapper{
  width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.wrapper-ovh{
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.tac{
  text-align: center;
}
.tal{
  text-align: left;
}
.tar{
  text-align: right;
}
.flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}
.aic{
  align-items: center;
  webkit-box-align: center;
  -webkit-align-items: center;
}
.aie{
  align-items: end;
}
.jss{
  justify-content: space-between;
  flex-wrap:wrap;
}
.box-top{
  padding-top:5.6rem;
  padding-bottom:5.6rem;
}

/*---end common---*/
/*---til---*/
.til{
  font-size: 3rem;
  line-height: 4rem;
  font-weight: normal;
  text-align: center;
  position:relative;
  padding-bottom: 1.6rem;
  margin-bottom: 3.2rem;
}
.til span{
  font-weight: normal;
  color:var(--sub_l);
  background:var(--grad);
  background: -webkit-var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  ;}
  .til::before{
    content: '';/*何も入れない*/
    width: 80px;/*画像の幅*/
    height: 1px;/*画像の高さ*/
    background:var(--basic);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  .til.wh{
    color: #fff;
  }
  .til.wh::before{
    background:#fff;
  }
  /*---end til---*/

  /*---btn---*/
  .btn{
    cursor:pointer;
    text-align: center;
    /*    font-weight: bold;*/
    letter-spacing: 0.05em;
    color: #fff;
    max-width:530px;
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 2.8rem 1rem;
    box-sizing: border-box;
    border-radius:2px;
    font-size: 2.8rem;
    position: relative;
    overflow: hidden;
    transition:.4s;
    font-family: var(--font02);
    background:var(--sub_l);
    background-image: linear-gradient(to bottom, #ead694 0%, #d6bc66 4%, #b98700 96%, #deb73d 100%);
  }

  .btn:hover{
    transform: translate3d(0, 5px, 0);
    transform: scale(0.9);
    color: #fff;
  }
  /*---end btn---*/


  /*---footer---*/
  .footer{
    background: var(--basic_l);
    padding: 2.4rem 0;
  }
  .footer img.logo-ftr{
    width:200px;
    magin:0 auto
  }
  .copyright{
    font-size: 1.4rem;
    line-height: 2rem;
    font-family: var(--font02);
    text-align: center;
    padding: 1rem 0;
  }

.footer-detail{
	padding-top: 2rem;
	padding-bottom: 2rem;
	background: #f4f5f8;
}
.footer-detail_li{
	font-size: 1.5rem;
	line-height: 2.5rem;
}
.footer-btn{
    width: 100%;
	height: 100%;
		font-size: 1.5rem;
	padding: 1.4rem 1.6rem;
	border:1.6px solid var(--basic);
	display: block;
		transition:.2s;
}
.footer-btn:hover{
	opacity:0.6;
}
  /*---end footer---*/




  @media screen and (max-width: 1024px) {
    .wrapper {
      width: 100%;
      padding-left: 2.4rem;
      padding-right:2.4rem;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

  }
  @media screen and (max-width:769px) {
    body{
      font-size: 1.6rem;
      max-width:768px;
      box-sizing: border-box;
    }
    html{
      box-sizing: border-box;
      margin-top: 0 !important;
    }
    img{
      max-width:100%;
      height: auto;
    }
    .dn-sp{
      display: none;
    }

    .dn-pc{
      display: block;
    }
    .wrapper {
      width: 100%;
      box-sizing: border-box;
    }
	  .btn {
		font-family: var(--font01);
	  }
	  .til.small{
	font-size: 2.3rem;
	line-height: 3.2rem;
}
	  .footer-detail_li{
		  justify-content:center;
	  }
	  .footer-detail_li li:first-of-type{
		  text-align: center;
		  line-height: 2.4rem;
		  font-size: 1.4rem;
		  margin-bottom:1.6rem;
	  }

  }


  @media screen and (max-width:640px){
    body{
      /*	font-size: 1.4rem;*/
      max-width:640px;
      box-sizing: border-box;
    }
    html{
      box-sizing: border-box;
      margin-top: 0 !important;
    }
    img{
      max-width:100%;
      height: auto;
    }
    p{
      font-size: 1.5rem;
      line-height: 2.4rem;
    }
    .wrapper{
      width: 100%;
      box-sizing: border-box;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .btn{
      font-size: 2.4rem;
      padding: 2rem 1rem;
    }
	  
  }

  @media screen and (max-width:400px){
    body{
      /*	font-size: 1.4rem;*/
      max-width:640px;
      box-sizing: border-box;
    }
    html{
      box-sizing: border-box;
      margin-top: 0 !important;
    }
    img{
      max-width:100%;
      height: auto;
    }
    .wrapper{
      width: 100%;
      box-sizing: border-box;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
    }
    .btn{
      font-size: 2rem;
      padding: 2rem 1rem;
    }
  }