:root{
    /* カラー　*/
    --color_black: #000000;
    --color_yellow: #F2D970;
}

/*** ----------------------------------------------------------------------------- 

reset

-----------------------------------------------------------------------------  ***/
.clearfix:after {
	content:".";
	display:block;
	visibility:hidden;
	clear:both;
	height:0.1px;
	font-size:0.1em;
	line-height:0;
}
.clearfix {
	display:inline-table;
	zoom:1;
}
/*Hides from IE-mac \*/
* html .clearfix {
	height:1%;
}
.clearfix {
	display:block;
}


/* End hide from IE-mac */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0px;
	padding:0px;
}　
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, th, var {
	font-style:normal;
	font-weight:normal;
}
ul {
	list-style:none;
}
ol li{
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
input, textarea, select {
 *font-size:100%;
}
legend {
	color:#000000;
}
img {
	vertical-align:bottom;
  height: auto;
}
table caption {
	font-weight: bold;
	margin:0 0 5px;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/*** ------------------------------------------------------------------------------ 

HTML5

-----------------------------------------------------------------------------  ***/
#header, footer, nav, section, article, figure, aside {
	display:block;
}
* {
	box-sizing:border-box;
}
i{
	margin: 0 5px 0 0;
}
img{
	max-width: 100%;
	image-rendering: -webkit-optimize-contrast;
}

/*** ------------------------------------------------------------------------------ 

common

-----------------------------------------------------------------------------  ***/
html {
	height: 100%;
  font-size: 10px;
	overflow-x: hidden;
  overflow-x: clip;
}
body {
  background:url(../img/main-bg.jpg) top center / 4096px;
	color: var(--color_black);
	line-height: 2.0;
	font-size: 1.6rem;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
  overflow-x: clip;
}
@media (max-width:768px){
	body {
		font-size: 1.6rem;
	}
}


.l-section-inner{
  width: 1106px;
	max-width:100%;
	padding: 90px 20px 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.p-section-title{
  text-align: center;
  margin: 0 auto 45px;
}
.p-section-title__catch{
  margin: 0 auto 24px;
}
.p-section-title__main{
  line-height: 1.4;
  letter-spacing: 8px;
  font-size: 6rem;
  font-size: clamp(4.5rem, 5vw, 6rem);
  font-weight: 600;
}

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

@media (max-width:768px){
  .p-section-title{
    margin-bottom: 40px;
  }
  .p-section-title__main{
    letter-spacing: 4px;
    font-size: 3.2rem;
    font-weight: bold;
  }
	.pc{ display: none;}
	.sp{ display: block;}
}

@media(max-width:380px){
  .p-section-title{
    margin-bottom: 25px;
  }
  .p-section-title__main{
    font-size: 2.6rem;
  }
}

/*** ------------------------------------------------------------------------------ 

アニメーション

-----------------------------------------------------------------------------  ***/
.scroll_fade {
    transition: 0.8s ease-in-out;
    opacity: 0;
}
.scroll_fade.on {
    opacity: 1.0;
}
.scroll_fade2 {
    transition: 0.8s ease-in-out;
    opacity: 0;
}
.scroll_fade2.on {
    opacity: 1.0;
}



/*** ------------------------------------------------------------------------------ 

リンク

-----------------------------------------------------------------------------  ***/
/* 基本 */
a{
	outline:none;
	-webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
a img {
	transition: 0.3s;
}

input[type=text],
textarea {
  -webkit-appearance: none;
}



/*** ------------------------------------------------------------------------------ 

.l-header

-----------------------------------------------------------------------------  ***/
.l-header{
  width: 1240px;
  max-width: 100%;
  padding: 0 20px;
  position: absolute;
  top:26px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media(max-width:768px){
  .l-header{
    padding: 0 28px;
    top:20px;
  }
  .l-header__logo{
    width: 86px;
  }
}


/*** ------------------------------------------------------------------------------ 

.l-footer

-----------------------------------------------------------------------------  ***/
.l-footer{
  padding-bottom: 20px;
  border-bottom: solid 10px var(--color_yellow);
}
.l-footer-sns{
  text-align: center;
  margin-bottom: 90px;
}
.l-footer-sns__catch{
  margin-bottom: 36px;
}
.l-footer-sns__list{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:46px;
}
.l-footer-sns__list-item--instagram{
  width: 60px;
}
.l-footer-sns__list-item a{
  transition: .3s;
}
.l-footer-logo{
  width: 100%;
  border-bottom: solid 1px #3B3B3B;
  text-align: center;
}
.l-footer-logo__img{
  max-width: 100%;
}
.l-footer-nav{
  padding-top: 45px;
  text-align: center;
  margin-bottom: 45px;
}
.l-footer-nav__logo{
  width: 153px;
  margin:0 auto 13px;
}
.l-footer-nav__logo img{
  width: 100%;
}
.l-footer-nav__list{
  display: flex;
  justify-content: center;
  gap:27px;
}
.l-footer-nav__list-item a{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color_black);
}
.l-footer__copyright{
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 500;
}

@media(any-hover: hover){
  .l-footer-sns__list-item a:hover{
    opacity: .7;
  }
}
@media(max-width:768px){
  .l-footer{
    padding-bottom: 6px;
    border-bottom: solid 10px var(--color_yellow);
  }
  .l-footer-sns{
    margin-bottom: 46px;
  }
  .l-footer-sns__catch{
    width: 315px;
    max-width: 100%;
    margin: 0 auto 28px;
  }
  .l-footer-sns__list{
    gap:38px;
  }
  .l-footer-sns__list-item--instagram{
    width: 47px;
  }
  .l-footer-sns__list-item--x{
    width: 36px;
  }
  .l-footer-logo{
    width: 100%;
    border-bottom: solid 1px #3B3B3B;
    text-align: center;
  }
  .l-footer-logo__img{
    width: 327px;
    margin: 0 auto;
  }
  .l-footer-nav{
    padding-top: 30px;
    margin-bottom: 30px;
  }
  .l-footer-nav__logo{
    width: 106px;
    margin:0 auto 8px;
  }
  .l-footer-nav__logo img{
    width: 100%;
  }
  .l-footer-nav__list{
    gap:27px;
  }
  .l-footer-nav__list-item a{
    font-size: 1.4rem;
  }
  .l-footer__copyright{
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
  }
}


/*** ------------------------------------------------------------------------------ 

pg-top

-----------------------------------------------------------------------------  ***/

/* .pg-top-visual */
.pg-top-visual{
  border-top: solid 10px var(--color_yellow);
}
.pg-top-visual__inner{
  width: 1370px;
  max-width: 100%;
  padding: 47px 20px 33px;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  animation: visual .8s ease-in-out;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
@keyframes visual {
  100%{
    opacity: 1;
  }
}
.pg-top-visual__catch{
  width: 1623px;
  max-width: 122%;
  margin: 0 auto;
  transform:translateX(-6.5%);
}
.pg-top-visual__img{
  width: 1330px;
  max-width: 100%;
  margin: -9% auto 0;
}
.pg-top-visual__title{
  width: 1019px;
  max-width: 77%;
  margin: -6% auto 0;
}
.pg-top-visual__title span{
  font-size: 3.2rem;
}

/* .pg-top-concept */
.pg-top-concept{
  background:url(../img/concept-bg.png)repeat-x top center / 2340px;
}
.pg-top-concept .l-section-inner{
  width: 924px;
  padding-top: 187px;
  padding-bottom: 181px;
  position: relative;
}
.pg-top-concept .l-section-inner:before{
  content: '';
  display: block;
  width: 483px;
  height: 483px;
  background: url(../img/concept-img01.png)no-repeat center center / contain;
  position: absolute;
  right: -349px;
  bottom: 58px;
  z-index: 2;
}
.pg-top-concept .p-section-title__main{
  transform: translateX(24px);
}
.pg-top-concept__text{
  width: 810px;
  max-width: 100%;
  line-height:2.3;
  letter-spacing: 1.4px;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 auto 44px;
}

/* .pg-top-commit */
.pg-top-commit {
  position: relative;
}
.pg-top-commit::before {
  content: '';
  display: block;
  width: 100%;
  height: 409px;
  background: url(../img/commit-bg.png?ver=260306)no-repeat top center / 2446px;
  position: absolute;
  top:-350px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}
.pg-top-commit .l-section-inner{
  width: 1113px;
  position: relative;
  z-index: 2;
}
.pg-top-commit .p-section-title{
  margin-bottom: 119px;
}
.pg-top-commit .p-section-title__catch{
  margin-bottom: 13px;
}
.pg-top-commit .p-section-title__main{
  transform: translateX(10px);
}
.pg-top-commit__content{
  margin: 0 auto;
}
.pg-top-commit__content--01{
  margin-bottom: 73px;
}
.pg-top-commit__content--02{
  margin-bottom: 98px;
}


/* .pg-top-cta */
.pg-top-cta{
  text-align: center;
}
.pg-top-cta .l-section-inner{
  padding-top: 80px;
  padding-bottom: 109px;
}
.pg-top-cta__catch{
  width: 445px;
  max-width: 100%;
  margin: 0 auto;
  transform: translateX(13px);
}
.pg-top-cta__btn{
  display: inline-block;
  width: 670px;
  max-width: 100%;
  background:var(--color_yellow);
  border-radius: 17px;
  box-sizing: border-box;
  position: relative;
  margin-top: 81px;
}
.pg-top-cta__btn::before{
  content: '';
  display: block;
  width: 368px;
  height: 194px;
  background: url(../img/cta-img.png)no-repeat center center / contain;
  position: absolute;
  top:-125px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}
.pg-top-cta__btn-box{
  display: block;
  padding: 5px;
  border-radius: 17px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.pg-top-cta__btn-box::before {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
    transition: .5s;
    content: '';
}

.pg-top-cta__btn-box:hover::before {
  animation: flash .75s;
  animation-fill-mode: forwards;
}

@keyframes flash {
    100% {
      left: 120%;
    }
}


.pg-top-cta__btn-inner{
  display: block;
  padding:9px 20px 24px;
  border: solid 1px var(--color_black);
  border-radius: 17px;
}
.pg-top-cta__btn-text{
  display: inline-block;
  padding-left: 17px;
  padding-right: 100px;
  background: url(../img/cta-icon.svg)no-repeat top 29px right 8px / 68px;
  text-align:left;
  line-height: 1.1;
  letter-spacing: 3.5px;
  font-size: 4rem;
  font-weight: bold;
  color: var(--color_black);
}
.pg-top-cta__btn-text span{
  display: inline-block;
  letter-spacing: 1.5px;
  font-size: 2rem;
  transform: translateX(8px);
}

@media(max-width:1300px){
  /* .pg-top-concept */
  .pg-top-concept .l-section-inner:before{
    right: -20vw;
    bottom: 10px;
  }

  /* .pg-top-commit */
  .pg-top-commit::before {
    content: '';
    display: block;
    width: 100%;
    height: 409px;
    background: url(../img/commit-bg.png?ver=260306) no-repeat top center / 150%;
    position: absolute;
    top: -13%;
  }
}

@media(max-width:1100px){
  /* .pg-top-concept */
  .pg-top-concept .l-section-inner:before{
    right: -19vw;
  }
}
@media(max-width:950px){
  /* .pg-top-concept */
  .pg-top-concept .l-section-inner:before{
    width: 45vw;
    height: 45vw;
    right: -13vw;
  }
}

@media(max-width:768px){
  /* .pg-top-visual */
  .pg-top-visual__inner{
    padding:56px 0 46px;
  }
  .pg-top-visual__catch{
    width: 796px;
    max-width: 106%;
    transform: translateX(-4%);
  }
  .pg-top-visual__catch img{
    width: 100%;
  }
  .pg-top-visual__title{
    width: 750px;
    max-width: 100%;
    margin:-9% auto 0;
  }
  .pg-top-visual__img{
    display: none;
  }

  /* .pg-top-concept */
  .pg-top-concept{
    background: url(../img/sp/concept-bg.png)no-repeat top center / auto 100%;
    position: relative;
  }
  .pg-top-concept .l-section-inner{
    padding-top: 62px;
    padding-bottom: 220px;
    padding-top: 11vw;
    padding-bottom: 50vw;
    position: relative;
    z-index: 1;
  }
  .pg-top-concept .p-section-title__catch{
    width: 90px;
    margin-bottom: 12px;
  }
  .pg-top-concept .p-section-title__main{
    transform:translateX(4%);
  }
  .pg-top-concept__text{
    width: 335px;
    padding: 0 10px;
    line-height:1.9;
    letter-spacing:1px;
    font-size: 1.5rem;
    font-size:clamp(1rem, 4vw, 1.5rem);
    margin: 0 auto 22px;
  }
  .pg-top-concept .l-section-inner:before {
    width: 60vw;
    max-width: 217px;
    height: 60vw;
    max-height: 217px;
    left: 0;
    right: 0;
    bottom: 2%;
    margin: 0 auto;
    transform: translateX(91px);
  }

  /* .pg-top-commit */
  .pg-top-commit::before {
    display: none;
  }
  .pg-top-commit .l-section-inner{
    padding: 29px 0 0;
  }
  .pg-top-commit .p-section-title{
    padding: 0 20px 0;
    margin-bottom: 45px;
  }
  .pg-top-commit .p-section-title__catch{
    width: 260px;
    max-width: 100%;
    margin-bottom: 13px;
  }
  .pg-top-commit .p-section-title__main{
    line-height: 1.4;
    letter-spacing: 5px;
    transform: translateX(10px);
  }
  .pg-top-commit__content{
    width: 375px;
    max-width: 100%;
    margin-bottom: 70px;
  }

  /* .pg-top-cta */
  .pg-top-cta .l-section-inner{
    padding-top: 14px;
    padding-bottom: 78px;
  }
  .pg-top-cta__catch{
    width: 278px;
    transform: translateX(0);
  }
  .pg-top-cta__btn{
    display: inline-block;
    width: 315px;
    max-width: 100%;
    padding:0;
    background:var(--color_yellow);
    border-radius: 17px;
    box-sizing: border-box;
    position: relative;
    margin-top: 37px;
  }
  .pg-top-cta__btn::before{
    width: 172px;
    height: 90px;
    top:-59px;
  }
  .pg-top-cta__btn-box{
    padding: 2px;
  }
  .pg-top-cta__btn-inner{
    padding:12px 10px 14px;
    border-radius: 17px;
  }
  .pg-top-cta__btn-text{
    padding:0 0 32px;
    background: url(../img/sp/cta-icon.svg)no-repeat center bottom / 29px;
    text-align:center;
    line-height: 1.2;
    letter-spacing: 3.5px;
    font-size: 2.6rem;
  }
  .pg-top-cta__btn-text span{
    letter-spacing: 1.5px;
    font-size: 1.4rem;
    transform: translateX(0px);
  }
}
@media (max-width: 768px) and (min-height: 1024px) {
    .pg-top-concept .l-section-inner{
      padding-bottom: 290px;
  }
}

@media(max-width:450px){
  /* .pg-top-concept */
  .pg-top-concept{
    background: url(../img/sp/concept-bg.png)no-repeat top center / cover;
  }
  .pg-top-concept .l-section-inner{
    padding-top: 8vw;
  }
}
@media(max-width:380px){
  /* .pg-top-concept */
  .pg-top-concept .l-section-inner{
    padding-bottom: 60vw;
  }
}

@media(max-width:360px){
  /* .pg-top-concept */
  .pg-top-concept .l-section-inner:before{
    transform: translateX(25.5vw);
  }
}