/*
 * スタイルシートのリセットと基本的な設定
 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    font-size: 16px;
	overflow-x: clip;
	font-feature-settings: 'palt';
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

h2{
	font-size: 100px;
}

p,dd{
	word-break: break-all;
}

/*
 * ヘルパークラス
 */
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.flex-box{
	display: flex;
}

.inner-left,
.inner-right{
	width: 50%;
}

.text{
	color: #000;
	font-size: 16px;
	line-height: 1.5;
}

.forSP{
	display: none;
}


/* ヘッダー ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  width: 680px;
  height: 80px;
  z-index: 1000;
  background-color: #fff;
	border-radius: 0 0 0 10.971px;
	padding-left: 52px;
}



.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*margin: 0 0 0 24px;*/
  height: 100%;
  width: 100%;
}
.site-header.scrolled .header-inner{
	border-bottom: none;
}

.sp-logo{
		display: none;
	}

.header-nav{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: space-between;
}

.header-nav ul li{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
}




.header-nav a {
  text-decoration: none;
  color: #2462c1;
  font-size: 16px;
  text-transform: uppercase;
	transition: 0.3s;
}
.header-nav li:hover a{
	/*color: #ff0f47;*/
}

.header-nav li.current::after{
	content: '';
	background: #246ac1;
	border-radius: 50%;
	width: 9px;
	aspect-ratio: 1 / 1;
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
}


.header-nav ul li.nav-contact{
	
}

.header-nav ul li.nav-contact a{
    background : linear-gradient(90deg, rgba(243, 243, 244, 1) 14.53%, rgba(232, 246, 250, 1) 100%);
    border-radius : 22.5px;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 16px;
	transition: background-color 0.3s ease;
	padding: 16px 20px;
	width: 135px;
    height: 45px;
}
.header-nav ul li.nav-contact a:hover{
	/*filter: brightness(1.2);*/
}



.header-menu-toggle {
  display: none;
  background: #f0f4f5;
  border: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  /*margin-left: 16px;*/
}

.header-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #2462c1;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-menu-toggle span + span {
  margin-top: 5px;
}


.site-header.is-open .header-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .header-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .header-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


.site-header.is-open .header-nav ul li a{
	color: #fff;
}

.site-header.is-open .header-nav ul li.nav-contact a{
	width: auto;
	height: auto;
	background: none;
}





/* ヒーローセクション ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.hero-inner{
	width: 100%;
	display: flex;
}

.hero-left{
	width: calc(100% - 69.792vw);
	padding: 70px 0 0 70px;
	position: relative;
	z-index: 2;
}

.hero-left .logo{
	width: 14.2596vw;
	max-width: 273.784px;
	max-height: 216.501px;
	aspect-ratio: 273.784 / 216.501;
	margin-bottom: 180px;
}
.hero-tagline{
	font-size: 70px;
	font-weight: 500;
	color: #2462c1;
	margin-bottom: 78px;
	white-space: nowrap;
	    z-index: 99;
    position: relative;
}

.hero-tagline br{
	display: none;
}

.hero-left p{
	font-size: 22px;
}



.hero-right{
	width: 69.792vw;
	max-width: 1340px;
	max-height: 1080px;
	aspect-ratio: 1340 / 1080;
	background: url("../images/hero-back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	min-height: 672.9851px;
	height: 1080px;
}

#hero-anime-01{
	position: absolute;
    width: 446px;
    height: 671px;
    left: -270px;
    top: 216px;
    overflow: visible;
}
#hero-anime-02{
	position: absolute;
    width: 550px;
    height: 314px;
    left: -190px;
    top: 427px;
    overflow: visible;
}
#hero-anime-03{
	position: absolute;
	width: 1341px;
    height: 10px;
    left: 0;
    top: 554px;
    overflow: visible;
}
#hero-anime-04{
	position: absolute;
    overflow: visible;
    width: 23px;
    height: 23px;
    left: 521px;
    top: 548px;
	fill: rgba(255, 255, 255, 1);
}

.section h2{
	font-size: 100px;
	font-weight: 500;
	color: #2462c1;
	line-height: 1;
	margin-bottom: 40px;
	position: relative;
	z-index: 2;
}

.section h2::before{
	content: '';
	background: url("../images/n_5.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    width: 74px;
    height: 75px;
    left: -37px;
    top: 20px;
    overflow: visible;
}
.section h2::after{
	content: '';
	background: url("../images/n_4_o.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    width: 320px;
    height: 7px;
    left: 0;
    bottom: 31px;
    overflow: visible;
}



.section .sub{
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 75px;
	display: block;
}

.tagline{
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 50px;
	display: block;
}

#section-01{
	padding-top: 70px;
}

#section-01 .tagline{
	width: 475.0699px;
	height: 77.5979px;
    margin-top: -18px;
}



#section-01 .flex-box{
	margin-bottom: 60px;
	align-items: center;
	/*justify-content: space-between;*/
}

#section-01 .inner-flex{
	display: flex;
}



#section-01 .flex-01{
	max-width: 368.9941px;
	margin-right: 88px;
	    margin-top: 82px;
}
#section-01 .flex-02{
	max-width: 480px;
	margin-right: 135px;
	    margin-top: 118px;
}
#section-01 .flex-03{
	max-width: 565.6544px;
}
#section-01 .flex-03 img{
	margin-right: -226px;
	max-width: 565.6544px;
	aspect-ratio: 565.6544 / 328.3827;
}

.service-list{
	max-width: 1300px;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	margin-bottom: 100px;
	background: url("../images/service-list-back.png");
	background-position: center center;
}
.service-list li{
	width: calc((100% - 40px) / 3);
	background: #f3f3f4;
	padding: 22px;
	max-width: 420px;
	min-height: 360px;
}

.service-list li .number{
	color: #0d2a65;
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 28px;
}
.service-list li h3{
	color: #2462c1;
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 58px;
	text-align: center;
	line-height: 1;
    margin-top: 28px;
}


#section-02{
	background: linear-gradient(to bottom, #fff 25.234vw, #f5f6f6 25.234vw);
}

#section-02 .background-wrapper{
	background: url("../images/works-back.png");
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 95px;
	padding-top: 195px;
}
#section-02 .container{
	max-width: 1700px;
}

#section-02 .flex-box{
	max-width: 1500px;
	justify-content: space-between;
    margin: 0 auto 95px;
}

#section-02 .flex-box .sub{
	margin-bottom: 75px;
	display: block;
}

#section-02 .flex-01{
	width: 37.072vw;
	max-width: 711.7832px;
}

#section-02 h2{
	margin-top: 38px;
}



#section-02 .tagline{
	margin-left: 100px;
	max-width: 606px;
	font-size: 26px;
	margin-bottom: 0;
}

#section-02 .flex-02 .image-box{
	margin-right: -48px;
}


.works-list{
	border-radius: 26.298px;
	background: #fff;
	padding: 60px;
	display: flex;
	gap: 58px 18px;
	flex-wrap: wrap;
	box-shadow : 0px 0px 20.94px rgba(0, 0, 0, 0.1);
}

.works-list li{
	width: 380px;
	font-weight: 400;
}

.works-list li .iframe-wrap{
	width: 100%;
	height: 250px;
	margin-bottom: 20px;
	background: #f5f6f6;
}

.works-list li h3{
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 14px;
	line-height: 1;
}




#section-03{
	padding-top: 152px;
	padding-bottom: 115px;
	background: url("../images/company-back.png");
	background-size: contain;
    background-repeat: no-repeat;
	background-position: top center;
}

#section-03 .flex-box{
	justify-content: flex-end;
}


#section-03 .inner-left{
	width: 540px;
    aspect-ratio: 540 / 360;
    margin-right: 70px;
}


#section-03 .tagline{
	font-size: 60px;
	font-weight: 400;
	text-align: center;
	color: #246ac1;
}

#section-03 .text{
	margin: 0 auto 100px;
	max-width: 518px;
}

#section-03 .sub{
	margin-bottom: 75px;
	display: block;
}

#section-03 dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  max-width: 690px;
}
#section-03 dt {
	width: 150px;
	font-size: 18px;
  font-weight: 400;
	color: #2462c1;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: solid 2px #2462c1;
}
#section-03 dd {
  margin-bottom: 20px;
	padding-bottom: 20px;
  border-bottom: solid 2px #e5e5e5;
	padding-left: 20px;
}




#section-04{
	padding-top: 120px;
	padding-bottom: 104px;
	background : linear-gradient(90deg, rgba(243, 243, 244, 1) 14.53%, rgba(232, 246, 250, 1) 100%);
	position: relative;
}
#section-04:before{
	content: '';
	background: url("../images/n_17.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 95.295vw;
	height: auto;
	aspect-ratio: 1829.6688 / 610;
	max-width: 1829.6688px;
	max-height: 610px;
	position: absolute;
	top: 125px;
	left: -224px;
}

#section-04 .container{
	position: relative;
}

#section-04 .flex-box{
	justify-content: space-between;
}
#section-04 .flex-box .inner-right{
	margin-right: 100px;
}
#section-04 .text-warpper{
	margin-left: 100px;
}

#section-04 .tagline{
	color: #2462c1;
	margin-bottom: 60px;
}
#section-04 p{
	margin-bottom: 40px;
	line-height: 1.8;
}

#section-04 .image-box{
	width: 560px;
	height:  370px;
	margin-bottom: 90px;
}

#section-04 .flex-02{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.button-01{
	width: 540px;
	height: 160px;
	padding: 40px;
	background: #2462c1;
	display: flex;
	align-items: center;
	font-size: 24px;
	color: #fff;
	position: relative;
	justify-content: space-between;
    max-width: 100%;
}
.button-01::after{
	content: '';
	background:url("../images/external.svg");
	width: 22.5683px;
	height: 22.5683px;
}




#contact{
	padding-top: 120px;
	padding-bottom: 180px;
}
#contact a{
    color: #2462c1;
}

#contact .container > p{
	color: #2462c1;
	margin: 0 auto;
	width: fit-content;
	font-size: 20px;
	margin-bottom: 100px;
	line-height: 1.8;
}

.form-wrap{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	font-size: 20px;
	padding-bottom: 75px;
}



/* 並び */
.radio-wrap{
  display:flex;
  gap:45px;
	border-bottom: solid 2px #dadde3;
	padding-bottom: 50px;
	margin-bottom: 45px;
	width: 100%;
	padding-left: 50px;
}

/* ラベル */
.radio-item{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
	position: relative;
      padding: 15px;
	height: 60px;
	width: 270px;
	justify-content: flex-start!important;

}

/* 元のラジオを消す */
.radio-item input[type="radio"]{
  -webkit-appearance:none;
  appearance:none;

  width:30px;
  height:30px;
  border-radius:50%;

  background:#fff;
  border:none;

  display:grid;
  place-items:center;

  cursor:pointer;
  margin:0;
}


/* 選択中のラベル背景 */
.radio-item:has(input[type="radio"]:checked){
  background: #f4f7fc;
  border-radius: 10px;
/*  padding: 6px 12px;*/
}


/* 非選択時：内側20px円 */
.radio-item input[type="radio"]::before{
  content:"";
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:1px solid #2462c1;
  box-sizing:border-box;
}

/* 選択時：外側を#2462c1でベタ塗り */
.radio-item input[type="radio"]:checked{
  background:#2462c1;
}

/* 選択時：内側円を消す */
.radio-item input[type="radio"]:checked::before{
  content:none;
}

/* キーボード操作対応（任意） */
.radio-item input[type="radio"]:focus-visible{
  outline:2px solid rgba(36,98,193,.4);
  outline-offset:3px;
}

/* ▼（非表示が初期状態） */
.radio-item::after{
  content:"";
  position:absolute;
  left:50%;              /* ラベル全体の中央 */
  bottom:-26px;
  transform:translateX(-50%);

  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:10px solid #2462c1;

  opacity:0;
}

/* 選択中のみ表示 */
.radio-item:has(input[type="radio"]:checked)::after{
  opacity:1;
}

.form-group{
	display: flex;
	margin-bottom: 4px;
	align-items: center;
	padding: 0 50px 0 45px;
}
.form-group:nth-of-type(1){
	padding: 0;
}


.form-group label{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 213px;
	margin-right: 14px;
}

.form-group label .required{
	font-size: 14px;
	color: #2462c1;
	width: 48px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px #2462c1;
	border-radius: 10px;
	justify-self: flex-start;
}
.form-group label .required.none{
	border: none;
}

.form-group > input[type="text"],
.form-group > textarea {
  width: 100%;
	max-width: 690px;
  box-sizing: border-box;
  border: none;
  padding: 10px;
  font-size: 16px;
  min-height: 56px;
	background: #f4f7fc;
}

.form-group:nth-of-type(3) > input[type="text"],
.form-group:nth-of-type(4) > input[type="text"],
.form-group:nth-of-type(6) > input[type="text"],
.form-group:nth-of-type(8) > input[type="text"]{
	max-width: 340px;
}

.form-group:nth-of-type(9){
	align-items: flex-start;
}
.form-group:nth-of-type(9) label{
	margin-top: 20px;
}
.form-group:nth-of-type(9) > textarea{
	min-height: 216px;
}


.policy{
	margin-top: 40px;
}
.policy-check > p{
	text-align: center;
	margin-bottom: 34px;
}
.policy-check label{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-bottom: 37px;
}
.policy-check label > p{
	width: fit-content;
}
/*.policy-check label > input[type="checkbox"]{
	background: #dee7f6;
	width: 20px;
	height: 20px;
	border: none;
}*/

/*.custom-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}*/

/* 元のチェックボックスを消す */
.policy-check label > input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;

  background: #dee7f6;
	width: 20px;
	height: 20px;
	border: none;

  display:grid;
  place-items:center;

  cursor:pointer;
  margin:0;
}

/* チェックマーク */
.policy-check label > input[type="checkbox"]::before{
  content:"";
  width:6px;
  height:12px;

  border-right:3px solid #fff;
  border-bottom:3px solid #fff;

  transform:rotate(45deg) scale(0);
  transition:.2s;
}

/* チェック時 */
.policy-check label > input[type="checkbox"]:checked{
  background:#2462c1;
}

.policy-check label > input[type="checkbox"]:checked::before{
  transform:rotate(45deg) scale(1);
}

/* フォーカス（キーボード対応） */
.policy-check label > input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(36,98,193,.4);
  outline-offset:3px;
}

.button{
  width:360px;
  height:60px;
  background:#2462c1;
  border:none;
  border-radius:30px;
  font-size:20px;
  color:#fff;
  font-weight:400;
  letter-spacing:0.05em;
  cursor:pointer;
  transition:.2s ease;
	    margin: 0 auto;
    display: block;
}

/* ホバー */
.button:hover{
  filter:brightness(0.95);
}

/* 押したとき */
.button:active{
  transform:translateY(2px);
}

/* フォーカス */
.button:focus-visible{
  outline:2px solid rgba(36,98,193,.4);
  outline-offset:3px;
}


#contact .flex-box{
	width: 100%;
	max-width: 1300px;
	padding: 104px 50px 0; 
	border-top: solid 1px #cccccc;
	margin: 0 auto;
	gap: 0 114px;
}

#contact .flex-box h3{
	font-size: 30px;
	font-weight: 400;
	line-height: 1.6;
	color : #2462C1;
	margin-right: 36px;
}


.tel-and-fax{
	padding-top: 10px;
}

.tel-and-fax-inner{
	display: flex;
	align-items: center;
}

.tel-and-fax-inner span{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 60px;
	height: 40px;
	background: #2462c1;
	border-radius: 20px;
	color: #fff;
	font-size: 22px;
	margin-right: 15px;
}

.tel-and-fax-inner a{
	pointer-events: none;
	font-size: 40px;
	color: #000!important;
}
/*.tel-and-fax p{
	margin-top: 18px;
	padding-left: 75px;
	font-size: 23px;
}*/

#contact .container > p:nth-of-type(2){
	color: #000;
	font-size: 40px;
	padding: 0 50px 0 90px;
    margin-bottom: 0;
}




.site-footer{
	display: flex;
	    padding-bottom: 75px;
}



.fotter-inner-left{
	width: 27.240vw;
	max-width: 523px;
	padding-left: 80px;
	position: relative;
}
.fotter-inner-right{
	width: calc(100% - 27.240vw);
	background: #f4f7fc;
	border-radius: 56.5px 0 0 56.5px;
	padding-right: 210px;
	padding-left: 100px;
	padding-bottom: 90px;
	position: relative;
	min-height: 670px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fotter-inner-right:before{
	content: '';
	background: url("../images/n_18.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 80.15625vw;
	height: auto;
	aspect-ratio: 1539 / 285;
	max-width: 1539px;
	max-height: 285px;
	position: absolute;
	top: 236px;
	left: -142px;
	pointer-events: none;
}


.f-logo{
	display: block;
	width: 294px;
	height: 233px;
	margin-bottom: 84px;
	margin-top: 40px;
}

.mini{
	font-size: 12px;
    position: absolute;
    bottom: 50px;
}



.f-nav-wrapper{
    margin-top: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-nav{
	width: 100%;
}

.footer-nav ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	/*gap: 0 111px;*/
	margin-bottom: 80px;
	padding-right: 36px;
}
.footer-nav li{
	position: relative;
}
.footer-nav li::after{
	content: '';
	display: inline-block;
	background: url("../images/arrow.svg");
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: -36px;
	transform: translateY(-50%) rotate(90deg);
	
}

.footer-nav li a{
	color: #2462c1;
	font-size: 20px;
	font-weight: 600;
}
.privacy-link{
	color: #666666;
}


.f-company-info dt{
	color: #2462c1;
	margin-bottom: 40px;
}






#pagetop{
	width: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 44px;
	right: 44px;
}

#pagetop img{
	width: 50px;
	height: 50px;
}
#pagetop span{
	color: #2462c1;
	font-size: 16px;
	text-align: center;
}


/* 個人情報保護方針 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#privacy .hero-right{
    width: 53.125vw;
	height: 700px;
    max-width: 1020px;
    max-height: 700px;
    aspect-ratio: 1020 / 700;
	background: url("../images/hero-back-privacy.jpg");
}
#privacy .hero-left {
    width: calc(100% - 53.125vw);
    padding: 70px 0 0 70px;
    position: relative;
    z-index: 2;
}
#privacy #hero-anime-01 {
    position: absolute;
    width: 445px;
    height: 670px;
    left: -265px;
    top: 216px;
    overflow: visible;
}
#privacy #hero-anime-02 {
    position: absolute;
    width: 550px;
    height: 314px;
    left: -190px;
    top: 237px;
    overflow: visible;
}
#privacy #hero-anime-03 {
    position: absolute;
    width: 1341px;
    height: 10px;
    left: 0;
    top: 364px;
    overflow: visible;
}
#privacy #hero-anime-04 {
    position: absolute;
    overflow: visible;
    width: 23px;
    height: 23px;
    left: 521px;
	left: 27.135vw;
    top: 358px;
    fill: rgba(255, 255, 255, 1);
}

#privacy .hero-left .logo{
	margin-bottom: 120px;
}

#privacy .hero-tagline{
	margin-bottom: 50px;
    line-height: 1;
    position: relative;
	margin-left: 40px;
	font-size: 70px;
}
#privacy .hero-tagline::before {
    content: '';
    background: url(../images/n_5.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 74px;
    height: 75px;
    left: -37px;
    top: 25px;
	overflow: visible;
}
#privacy .hero-tagline::after {
    content: '';
    background: url(../images/n_4_o.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 320px;
    height: 7px;
    left: -45px;
    bottom: 28px;
    overflow: visible;
}




#privacy .sub{
	font-size: 26px;
    font-weight: 400;
    margin-bottom: 75px;
    display: block;
	margin-left: 40px;
}




#privacy-01 .container{
	max-width: 1140px;
	padding: 0 70px;
	margin-top: 130px;
	font-size: 14px;
}
#privacy-01 .container p{
	margin-bottom: 60px;
	line-height: 2;
}

#privacy-01 .container > ul{
	margin-bottom:  calc(210px - 60px);
}


#privacy-01 .container .policy-h{
	font-size: 22px;
	color: #2462c1;
	margin-bottom: 28px;
}

#privacy-01 .container .policy-text{}

/* 404 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#notfound-01{
}









[id]{
	scroll-margin-top: 190px;
}

/* レスポンシブデザイン ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.sp-layout{display:none;}

@media (min-width: 1921px) {
}

@media (max-width: 1920px) {
	
	#section-01 .container,
	#section-03 .container,
	#section-04 .container,
	#contact .container{
		max-width: 1640px;
    margin: 0 auto;
    padding: 0 70px;
    width: 100%;
	}
	
	#section-02 .container{
    max-width: 1840px;
    padding: 0 70px;
    width: 100%;
    }
	.works-list{
		justify-content: center;
	}
}

@media (max-width: 1800px) {
	#section-01 .inner-flex{
	flex-direction: column;
    gap: 80px;
    align-items: center;
    }
	
}


@media (max-width: 1740px) {
	.site-footer{
		flex-direction: column;
		gap: 80px;
	}
	
	.fotter-inner-right{
		align-self: flex-end;
		width: 90%;
	}
	.fotter-inner-left {
    width: 100%;
    max-width: unset;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}


@media (max-width: 1640px) {
}

@media (max-width: 1430px) {
	#section-01 .flex-03 img{
		margin-right: 0;
	}
	#section-01 .flex-box{
		flex-direction: column;
		align-items: flex-start;
        gap: 80px;
	}
	#section-01 .flex-02{
		max-width: unset;
        margin-right: 0;
	}
	#section-01 .flex-03 {
        max-width: unset;
        margin: 0 auto;
    }
	
	#contact .flex-box{
		flex-direction: column;
		align-items: center;
        gap: 40px;
	}
	#contact .flex-box h3{
		margin-bottom: 20px;
	}
	
	#contact .flex-box h3 br{
		display: none;
	}
	
	#section-02 .tagline{
		margin-left: 0;
	}
	#section-02 .tagline br{
		display: none;
	}
	#section-02 .flex-01{
		    width: 38.072vw;
	}
	.works-list li{
		width: calc((100% - 18px) / 2);
	}
	
	
	.fotter-inner-right{
		    min-height: 600px;
	}
	
	.f-nav-wrapper{
		margin-top: 100px;
	}
	
	.footer-nav ul{
		flex-wrap: wrap;
        gap: 20px 80px;
        justify-content: flex-start;
	}
	
	#contact .container > p:nth-of-type(2){
		padding: 0;
		margin-top: 40px;
	}
}






@media (min-width:1281px) {
	.hero-inner{
		justify-content: center;
	}
	.site-footer{
		justify-content: flex-end;
	}
}


@media (max-width: 1280px) {
	#section-02 .tagline{
		margin-left: 0;
		margin-bottom: 40px;
	}
	#section-02 .flex-02 .image-box {
    margin-right: 0;
}
	#section-02 .flex-box{
		flex-direction: column;
	}
	#section-02 .flex-01,
	#section-02 .tagline{
		width: 100%;
		max-width: unset;
	}
	#section-02 .flex-02 .image-box{
		display: flex;
		justify-content: center;
	}
	#section-04 .text-warpper{
		margin-left: 0;
	}
	#section-04 .flex-box{
		flex-direction: column;
	}
	.button-01{
        margin: 0 auto;
	}
	#section-03 .flex-box {
    flex-direction: column;
    gap: 80px;
    }
	#section-03 .flex-box .inner-left,
	#section-03 .flex-box .inner-right{
		width: 100%;
	}
	#section-03 dl{
		max-width: unset;
	}
	#section-03 .inner-left{
		padding-right: 0;
		aspect-ratio: unset;
	}
	#section-03 .flex-box .inner-left img{
		margin: 0 auto;
	}
}


@media (max-width: 1040px) {
	.service-list li{
		width: 100%;
		max-width: unset;
	}
	.service-list{
        background: url(../images/service-list-back-sp.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
}




@media (max-width: 960px) {
	
	.forPC{
		display: none;
	}
	.forSP{
		display: block;
	}
	
	.sp-logo{
		display: block;
		width: 69.166vw;
		max-width: 442.6606px;
		max-height: 90.8911px;
		min-width: 320px;
		aspect-ratio: 442.6606 / 90.8911;
	}
	.logo{
		display: none;
	}
	
	#hero{
		margin-top: 160px;
	}
	
	#hero p{
		position: relative;
		padding-left: 40px;
		margin-top: 75px;
		font-size: 23px;
	}
	
	
	
	.hero-left{
		padding-left: 60px;
		padding-top: 263px;
		width: 21.40625vw;
		max-width: 137px;
	}
	.hero-right{
		width: calc(100% - 21.40625vw);
		height: auto;
		/*min-height: 672.9851px;*/
		min-width: calc(100% - 137px);
	}
	
	.hero-tagline br{
		display: inline;
	}
	
	.hero-tagline{
		font-size: 59.46px;
		line-height: 1.8;
	}
	
	#hero-anime-01{
		top: 155px;
		left: -169px;
		/*left: -26.40625vw;*/
        width: 277px;
        height: 383px;
	}
	#hero-anime-02{
		top: 268px;
		left: -125px;
		width: 344px;
        height: 196px;
	}
	#hero-anime-03{
		top: 365px;
		left: -100px;
		/*left: -15.625vw;*/
        width: 1122px;
        height: 6px;
	}
	#hero-anime-04{
		top: 358px;
		left: 318px;
		/*left: 40.6875vw;*/
	}
	
	.site-header{
	  width: 100%;
	  height: 160px;
	}
	
  .header-inner {
    padding: 17px 26px;
	  margin: 0;
      padding-left: 0;
  }
	
	


  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #2462c1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 16px 34px 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .header-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
	  width: 100%;
  }
	.header-nav ul li{
		width: 100%;
	}


  .site-header.is-open .header-nav {
    max-height: 90vh;
    height: fit-content;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
	  padding-bottom: 30px;
  }


  .header-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
	
	.header-nav li.current::after, 
	.header-nav li:hover::after{
		width: 0;
	}	
	
	.site-header.is-open .header-nav ul li.nav-contact a{
        padding: 0;
	}
	
	
	
	
	.works-list li{
		width: 100%;
	}
	
	.footer-nav ul{
		flex-direction: column;
		width: fit-content;
		gap: 20px;
	}
	
	.form-group{
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
        margin-bottom: 40px;
	}
	.form-group label{
		min-width: unset;
    margin-right: 0;
		margin-bottom: 10px;
		align-items: center;
		gap: 16px;
	}
	
	.form-group:nth-of-type(2) .required,
	.form-group:nth-of-type(6) .required{
		display: none;
	}
	
	#section-01 .inner-flex{
		align-items: flex-start;
	}
	
	#privacy .hero-left{
		width: 21.40625vw;
        max-width: 137px;
		white-space: nowrap;
	}
	
	#privacy .hero-right{
		width: calc(100% - 21.40625vw);
        height: auto;
        min-height: 672.9851px;
		background-position: center;
	}
	#privacy #hero-anime-01{
		top: 155px;
		left: -26.40625vw;
        width: 277px;
        height: 383px;
	}
	#privacy #hero-anime-02{
		top: 268px;
		width: 344px;
        height: 196px;
	}
	#privacy #hero-anime-03{
		top: 365px;
		left: -15.625vw;
        width: 1122px;
        height: 6px;
	}
	#privacy #hero-anime-04{
		top: 358px;
		/*left: 320px;*/
		left: 40.667vw;
	}
	#privacy .hero-tagline::before{
		top: 0;
	}
	#privacy .sub{
		margin-top: 0;
		padding-left: 0;
	}
	#privacy-01 .container{
		margin-top: 75px;
	}

	
}


@media (max-width: 768px) {


	.sp-logo{
		width: 56.166vw;
		min-width: 218px;
	}
	.header-menu-toggle{
		width: 60px;
		height: 60px;
	}
	#section-01 .flex-03{
		margin-right: 0;
	}
	
    .fotter-inner-right {
        width: calc(100% - 17px);
    }
	#contact .flex-box{
		padding: 104px 0 0;
	}
	.fotter-inner-right{
		padding-right: 75px;
	}
	.privacy-link{
		align-self: flex-start;
	}
	.footer-nav ul{
		margin-bottom: 20px;
	}
	.radio-wrap{
		flex-direction: column;
		column-gap: 0;
	}
	.radio-item:has(input[type="radio"]:checked)::after{
		display: none;
	}
	
	#section-01 .flex-03 img{
		width: 100%;
		max-width: 503.6544px;
	}
	
	#section-01 .inner-flex{
		align-items: flex-start;
		gap: 0;
	}
	#pagetop{
		top: unset;
    right: 44px;
    bottom: 44px;
	}
	.fotter-inner-right{
		padding-bottom: 180px;
		gap: 2em;
	}
	.f-nav-wrapper{
		margin-top: 60px;
	}
	
	#privacy .hero-tagline{
		font-size: clamp(36px, 9.291vw, 59.46px);
	}
	#privacy .hero-tagline::after{
		    top: 50%;
    transform: translateY(-50%);
	}
	#privacy-01 .container .policy-h{
		font-size: 18px;
	}
	
	#section-01 .container, 
	#section-03 .container, 
	#section-04 .container,
	#contact .container{
		padding: 0 60px;
	}
	
	#section-02 .background-wrapper{
		padding-top: 80px;
	}
	#section-02 .tagline {
		    margin-bottom: 40px;
	}
	#section-04 .image-box{
		width: 100%;
        height: auto;
	}
	
	.radio-wrap{
	padding-left: 0;
}
	.f-company-info dt{
		margin-bottom: 10px;
	}
	.fotter-inner-right:before{
		    display: none;
	}

	
}

@media (max-width: 639px) {
	.site-header{
		height: 100px;
	}
	#hero{
		margin-top: 100px;
	}
	#hero p,
	.hero-left{
		padding-left: 26px;
	}
	
	#section-01 .container, 
	#section-02 .container,
	#section-03 .container, 
	#section-04 .container, 
	#contact .container{
		padding: 0 26px;
	}

	.hero-tagline{
		font-size: clamp(36px,9.291vw,59.46px);
	}
	.section h2{
		font-size: clamp(60px,15.625vw,100px);
	}
	#section-01 .flex-01{
		margin-right: 0;
	}
	#section-01 .tagline{
		width: 100%;
		aspect-ratio: 475.0699px / 77.5979px;
		max-width: 475.0699px;
	}
	.section .sub{
		margin-bottom: 0;
		font-size: clamp(18px,4.063vw,26px)
	}
	#section-04 .sub,
	#contact .sub{
		margin-bottom: 1em;
	}
	.works-list{
		padding: 60px 26px;
	}
	#section-03 dt{
		width: 100px;
		padding-bottom: 10px;
		font-size: 16px;
	}
	#section-03 dd{
		padding-bottom: 10px;
		font-size: 16px;
	}
	#section-04 .image-box{
        aspect-ratio: 560 / 370;
        width: 100%;
		height: auto;
	}
	.button-01{
        font-size: 16px;
		width: 100%;
        height: auto;
	}
	.button-01::after{
        width: 16.5683px;
        height: 16.5683px;
	}
	.tagline{
		font-size: clamp(26px,5vw,32px)
	}
	#section-02 .flex-01, #section-02 .tagline{
		font-size: clamp(18px,4.063vw,26px)
	}
	#section-03 .tagline{
		font-size: clamp(24px,9.375vw,60px)
	}
	#contact .container > p{
		font-size: clamp(16px,3.125vw,20px)
	}
	
	form{
		font-size: 16px;
	}
	.radio-wrap{
		gap: 20px;
        padding-bottom: 20px;
        margin-bottom: 15px;
	}
	.radio-item input[type="radio"]{
        width: 16px;
        height: 16px;
	}
	.radio-item input[type="radio"]::before{
		width: 14px;
        height: 14px;
	}
	.button{
		width: 100%;
	}
	#contact .flex-box h3{
		font-size: clamp(24px,4.6875vw,30px)
	}
	.tel-and-fax-inner a{
		font-size: clamp(34px,6.25vw,40px)
	}
	.f-logo{
		aspect-ratio: 294 / 233;
    width: 80%;
		max-width: 194.5px;
    height: auto;
    margin-bottom: 1em;
    margin-top: 0;
	}
	.mini{
    position: unset;
		margin-top: 1em;
	}
	.fotter-inner-left{
		padding: 0 26px;
	}
	.fotter-inner-right{
		padding: 0 26px 180px;
		align-items: center;
	}
	
	#privacy .hero-left {
        padding-left: 26px;
    }
	#privacy .hero-tagline{
		margin-left: 0;
		        margin-bottom: 40px;
	}
	#privacy .sub{
		font-size: clamp(18px, 4.063vw, 26px);
		margin-left: 0;
		padding-left: 0;
		margin-bottom: 0;
	}

	#privacy .hero-tagline::after{
		bottom: 24px;
		height: 4px;
	}
	#privacy-01 .container{
        padding: 0 26px;
	}
	
	.footer-nav li a{
		font-size: 16px;
	}
	.site-footer{
        padding-bottom: 20px;
	}
	#privacy #hero-anime-01{
		left: -37.40625vw;
	}
	#privacy #hero-anime-02{
		left: -2000px;
	}
	
	.tel-and-fax-inner:nth-of-type(1) a{
		pointer-events: initial;
	}
	

	#contact .container > p:nth-of-type(2){
		font-size: clamp(30px, 6.25vw, 40px);
}