@charset "utf-8";

/* ヘッダー
-------------------------------------*/
header {
	width: 100%;
	background-color: var(--white);
	position: -webkit-sticky;
	position: sticky;
	top: 0;
    left: 0;
	z-index: 9999;
}

header .head-area {
	max-width: 1750px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1rem 3rem;
}

.head-logo {
    padding-left: 115px;
    line-height: 61px;
    background: url(../images/common/logo.svg) no-repeat;
	font-weight: bold;
}



h1{
	font-size: clamp(25px, 3vw, 31px);
}

header .head-nav {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav-area {padding: 0 1rem;}

.nav-area ul {
	display: flex;
	justify-content: center;
}

.nav-area ul li {
    padding: 0 2rem;
    font-size: 18px;
	font-weight: 500;
}

.head-contact-btn {
	display: flex;
	background-color: var(--sub-color_01);
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	color: var(--white);
	padding: .5rem 2rem;
}

.head-contact-btn img {
	max-width: 20px;
}

.head-contact-btn p {
	margin: 0;
	white-space: nowrap;
}

.head-contact-btn:hover {
	color: var(--white);
	opacity: .8;
}

.head-contact-btn img:hover {opacity: 1;}

/* ハンバーガーボタン */
.hamburger {display: none;}
#mobile-nav {display: none;}

/* オーバーレイ */
.overlay {display: none;}

@media screen and (max-width: 1110px) {
	
	header h1 {margin-bottom: 0;}
	
	header .head-nav {padding-bottom: 1rem;}
	
	#mobile-nav {display: block;z-index: 9;}
	
	.nav-area {
		display: none; /* クローン使用しない時はblockにする */
		position: fixed;
		left: 0;
		/*top: 0;*/ /* クローン使用しない時に使う */
		width: 100%;
		padding: 0;
		transform: translateY(-200%);
		transition: transform 0.3s ease;
		z-index: 9; /* クローン使用しない時は削除する */
	}
	.nav-area.is-open {
		transform: translateY(0);
	}
	
	.head-contact-btn {display: none;}
	
	.nav-area ul {
		display: block;
		background-color: var(--sub-color_01);
	}
	
	.nav-area ul li {
		border-bottom: 1px solid var(--white);
		text-align: center;
		padding: 1rem;
	}
	
	.nav-area li.sp-view {display: block;}
	
	.nav-area ul li:last-of-type {border-bottom: none;}
	
	.nav-area ul li a {color: var(--white);}
	
	/* ハンバーガーボタン */
	.hamburger {
		display: block;
		position: absolute;
		right: 2%;
		top: 50%;
		transform: translateY(-50%);
		background-color: var(--sub-color_01);
		border-radius: 5px;
		cursor: pointer;
		width: 50px;
		height: 50px;
	}
	
	.hamburger span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
	}
	
	.hamburger span:nth-of-type(1),.hamburger span:nth-of-type(3) {
		height: 2px;
		background-color: var(--white);
		width: 62%;
		left: 10px;
	}
	
	.hamburger span:nth-of-type(1) {
		top:13px;	
	}

	.hamburger span:nth-of-type(2) {
		top:19px;
		left:11px;
		font-size:0.6rem;
		text-transform: uppercase;
		color: var(--white);
	}

	.hamburger span:nth-of-type(3) {
		top:36px;
	}

	/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
	.hamburger.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.hamburger.active span:nth-of-type(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	
	/* オーバーレイ */
	.overlay {
		display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(31, 41, 55, 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		z-index: 8;
        }
	.overlay.active {
		opacity: 1;
		visibility: visible;
        }
	body.menu-open {overflow: hidden;}
}

/* フッター
-------------------------------------*/
footer {
	padding: 1rem 1rem;
	/*background-color: var(--main-color);
	color: var(--white);*/
}

.foot-logo-mark {max-width: clamp(70px,25vw,112px);}

.foot-logo{
	font-size: clamp(25px, 3vw, 31px);
    text-align: center;
	font-weight: bold;
}

.copyright-html {font-size: 14px;text-align: center;margin: 0;font-weight:400;}

/* マップリンクボタン(角丸線+後三角) */
.link-btn__round-border {
	display: inline-flex;
    align-items: center;
	border: 1px solid var(--black);
    padding: .2rem .5rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}
/*[class*="link-btn__"]::after {
	content: "";
}
.link-btn__round-border::after {
	display: inline-block;
	width: 8px;
	height: 10px;
	background-color: var(--black);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	margin-left: .2rem;
	}*/

.link-btn__round-border:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

.link-btn__round-border:hover::after {
	background-color: var(--white);
}

.add{
	margin: 0 auto 2rem;
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 500;
}

.foot-nav{
	font-size: clamp(16px, 2vw, 18px);
	line-height: 2.0;
	padding: 0 5rem;
	font-weight: 500;
}

/* パララックス背景画像(一部) */



.bg__parallax-box {
	position: relative;
    width: 100%;
    height: clamp(300px, 26.5vw, 500px);
}
.bg__parallax-box > div {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
}
.bg__parallax-box > div > div {
	background: url("../images/common/bg-img01.jpg") no-repeat center / cover;
	position: fixed;
	top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

@media screen and (max-width: 2038px) {

.bg__parallax-box > div > div {
    background: url(../images/common/bg-img01.jpg) no-repeat bottom / 100% auto;	
	
}
}


/* トップページ
-------------------------------------*/
/* FV */
.fv {
    text-align: center;
    position: relative;
	margin-left: 2rem;
	margin-right: 2rem;
}

.wrapper{
    max-width: 1790px;
    margin: 0 auto;
    padding: 0 20px;
}

.position-r{
	position: relative;
}

.copyright {
	font-size: 12px;
	writing-mode: vertical-rl;
	margin: 0;
	position: absolute;
    top: 50%;
    right: -2.5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	white-space: nowrap;
}

.catch{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	line-height: 1.6;
	font-weight: bold;
	color: #fff;
	 text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	letter-spacing: 0.2em;
	width: 100%;
}

.muromachi {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}



.muromachi img{
	max-width: 1198px;
	width: 100%;
	margin: 0 auto;
	z-index: 9999;
	/*filter: drop-shadow(1px 1px 1px black);*/
}




@media screen and (max-width: 1560px) {

.muromachi{
	bottom: 0;
}
	
.muromachi img{
	width: 60%;
	}	
	
}

.arrow_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 15px 0 0;
  position: relative;
}

.arrow_box2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 15px 0 0;
  position: relative;
}

.arrow_box3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 15px 20px 0;
  position: relative;
}

.arrow_box4 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 15px 0 0;
  position: relative;
}

.arrow_box5 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 15px 0 0;
  position: relative;
}

.prev-arrow,
.next-arrow {
  display: block;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  position:relative;
}

.prev-arrow {
  transform: rotate(180deg);
  margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
  position:absolute;
  content: "";
  width:20px;
  height:20px;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}


.ttl-line{
position:absolute;/*絶対位置指定*/
left:0;/*横位置の指定*/
top:0;/*縦位置の指定*/
background:#000000;/*線の色指定*/
width:1px;/*線の幅指定*/
height:100%;/*線の高さ指定*/
z-index: 9998;	
}

.center-line{
	position: relative;
}

.center-line::after {
  content: ''; /* 疑似要素を生成 */
  position: absolute; /* 親要素を基準に配置 */
  top: 50%; /* 垂直方向の中央に移動 */
  transform: translateY(-50%); /* transformで完全に中央に合わせる */
  left: 50%; /* 水平方向の中央に配置 */
  width: 1px; /* 線の太さ */
  height: 100%; /* 線の長さ（親要素の高さに対する割合で指定） */
  background-color: #000; /* 線の色 */
}

.area-ttl,.area-sub{
	margin: 0 auto;
	line-height: 1.4;
	font-weight: 500;
}

.area-sub{
	margin-bottom: 1em;
}

.height400{
	height:400px;
}

.news-outer{
	display: flex;
}


.btn {
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    color: var(--black)#000;
	background-color: white;
    padding: .5rem 2rem;
    border: solid 1px #000;
	width: 100%;
	max-width: 200px;
	position: absolute;
	bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.btn p {
	margin: 0;
	white-space: nowrap;
	font-weight: 400;
}

.btn:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

.btn-right {
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    color: var(--black)#000;
	background-color: rgba(255,255,255,0);
    padding: .5rem 2rem;
    border: solid 1px #000;
	width: 100%;
	max-width: 200px;
	position: absolute;
	bottom: -30px;
    right: 0;
   }

.btn-right p {
	margin: 0;
	white-space: nowrap;
}

.btn-right:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

.oneArea {
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #e7e7e5 50%, #e7e7e5 100%);
  padding: 0 20px;	
}

.about-img{
	position: absolute;
	top: 0;
	left: -25%;
}

.about-img img{
	width: 100%;
}

.about-us-text{
	text-align: left;
	line-height: 1.6;
	font-weight: 400;
}

.about-text{
	text-align: left;
	line-height: 1.4;
	font-weight: 500;
}

.gray-area{
	background-color: #e7e7e5;
}

.gray-area2{
	background-color: #E5E5E5;
}

.line-up-area{
	background-image: url("../images/top/lineup_bg.jpg");
	background-size: contain;
	background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
    background-position: center center; 
	height: clamp(14.375rem, 8.625rem + 28.75vw, 43.125rem);
	position: relative;	
	padding: 4rem 6rem;
}

.white-box{
	background-color: rgba(255,255,255,0.6);
	position: absolute;
	left: 10%;
	top: 10%;
	padding: 6rem;
	max-width: 674px;
	z-index: 2;
}

.ttl-line-up{
position:absolute;/*絶対位置指定*/
left:15%;/*横位置の指定*/
top:24%;/*縦位置の指定*/
background:#000000;/*線の色指定*/
width:1px;/*線の幅指定*/
max-height:100%;/*線の高さ指定*/
z-index: 1;	
}

.btn-l {
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    color: var(--black)#000;
	/*background-color: white;*/
    padding: .5rem 2rem;
    border: solid 1px #000;
	width: 100%;
	max-width: 200px;
	position: absolute;
	top: 75%;
    left: 18%;
	z-index: 9998;
}

.btn-l p {
	margin: 0;
	white-space: nowrap;
}

.btn-l:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

#production-area{
	padding-left: 350px;
	margin: 6rem auto 0;
}

.btn-free-200 {
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    color: var(--black)#000;
	background-color: rgba(255,255,255,0);
    padding: .5rem 2rem;
    border: solid 1px #000;
	width:  200px;
	/*max-width: 200px;*/
	z-index: 9998;
}

.btn-free-200 p {
	margin: 0;
	white-space: nowrap;
}

.btn-free-200:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

.list-btn{
	max-width: 200px;
	width: 200px;
	margin: 2rem 1rem;
}

.btn-free-280 {
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    color: var(--black)#000;
	background-color: rgba(255,255,255,0);
    padding: .5rem 2rem;
    border: solid 1px #000;
	width:  280px;
	/*max-width: 200px;*/
	z-index: 9998;
}

.btn-free-280 p {
	margin: 0;
	white-space: nowrap;
}

.btn-free-280:hover {
	color: var(--white);
	opacity: .8;
	background-color: black;
}

.con-ttl-margin{
	margin-right: 2rem;
}

.tel{
	font-weight: bold;
	font-size: clamp(24px, 3vw, 32px);
}

.tel-width{
	max-width: 300px;
}



/* 下層ページ
-------------------------------------*/
.head-img{
	background: url("../images/about/head-img.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
	height: 400px;
}

.head-img2{
	background: url("../images/point/head-img.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
	height: 400px;
}

.head-img3{
	background: url("../images/examples/head-img.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
	height: 400px;
}

.head-img4{
	background: url("../images/contact/head-img.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
	height: 400px;
}


.page-ttl{
	font-size: clamp(24px, 3vw, 48px);
	font-weight: bold;
	position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	letter-spacing: 0.05em;
	width: 100%;
}

.head-accse{
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	
}

.head-accse img{
	max-width: 495px;
	margin: 0 auto;
	z-index: 9999;
}

.head-accse2{
	position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	
}

.head-accse2 img{
	max-width: 686px;
	margin: 0 auto;
	z-index: 9999;
}

.head-accse3{
	position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	
}

.head-accse3 img{
	max-width: 1160px;
	margin: 0 auto;
	z-index: 9999;
}

.head-accse4{
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	
}

.head-accse4 img{
	max-width: 428px;
	margin: 0 auto;
	z-index: 9999;
}


.mr20-pc { margin-right: 2rem; }
.mr40-pc { margin-right: 4rem; }

.tape {
    position: absolute;
    bottom: -210px;
    right: -190px;
}

.tape img{
	max-width: clamp(14.563rem, 11.65rem + 14.56vw, 29.125rem);
}

.bg__img {
	background: url("../images/about/company-bg.jpg") no-repeat center / cover;
}

.vertical-title {
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  white-space: nowrap;	
  /*text-orientation: upright;*/
  margin-block: 1em;
  padding-inline: 6rem;
  position: absolute;
  top: 0;
  left: 0;	
    }

.vertical-title::after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 90px;
    height: 100%;
    margin-top: 0;
    border-right: 1px solid #000;
}

.white-box-about{
	max-width: 800px;
	margin: 4rem 4rem 4rem 12rem;
	background-color: rgba(255,255,255,0.8);
	padding: 4rem 2rem;
}

.link-mark{
	color: var(--sub-color_01);
}

.link-mark:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  width: 1rem;
  content:url('../images/gaibu.svg');
}

.px20-0 { padding-left: 2rem; padding-right: 2rem; }

.width570{
	max-width: 570px;
}

.blue-block{
	background-color: #C1E9F4;
	padding: 5px;
	text-align: center;
}

.gray-block{
	background-color: #EAEAEA;
	padding: 5px;
	text-align: center;
}

.white-block{
	background-color: white;
	padding: 40px;
	height: 100%;
}

.white-block h2{
	font-weight: 500;
}

.ex-name{
	font-size: clamp(18px, 2.5vw, 24px);
	text-align: center;
	font-weight: bold;
	margin: 2rem auto;
}

.ex-text{
	font-size: clamp(14px, 2vw, 16px);
	text-align: left;
	margin: 2rem auto;
	padding: 0 1rem;
	line-height: 1.6;
}

.ex-list{
	display: flex;		/* flex で 横並び */
   flex-wrap: wrap;	/* 折り返しを指定 */
	justify-content: space-between;
}

.ex-list li{
	width: calc(100% / 3);
	padding: 1.2rem;
}

.line-box{
	border: 1px solid #000;
	padding: 1rem;
	text-align: center;
	min-height: 116px;
	vertical-align: top;
}

.font-m{font-weight:500;}
.font-r{font-weight:400;}

.space-text {
  white-space: pre;
}


/* アニメーション */
@keyframes rotation-r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


.rotating-animation {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	/*margin-top: -60px;*/
	/*margin-left: -60px;*/
	display: block;
	width: 230px;
	height: 230px;
	cursor: pointer;
}

.rotating-animation span {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rotating-animation span::before, .rotating-animation span::after {
	content: '';
	display: block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.rotating-animation span::before {
	width: 156px;
	height: 156px;
	background-image: url("../images/point/poly-pro-bg.png");
}

.rotating-animation span::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/point/poly-pro.svg");
	animation: rotating 10s linear infinite;
}

@keyframes rotating {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}

.poly-kaiten {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 40px auto;
  background: transparent;
  border-radius: 50%;
  border: dotted 2px #9cecff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  z-index: 1;
}

.poly-kaiten .rotate {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  animation: big-rotate 30s linear infinite;
  z-index: 10;
}

.poly-kaiten .rotate-ctn {
  position: relative;
  width: 100%;
  height: 100%;
}

.poly-kaiten .box {
  position: absolute;
  width: 170px;
  height: 170px;
  left: 50%;
  top: 50%;
  /* 回転なしで位置調整のみ */
}

/* 6つの画像を円形に等間隔に配置(半径約210px) */
.poly-kaiten .box.box-1 { transform: translate(calc(-50% + 0px), calc(-50% - 210px)); }
.poly-kaiten .box.box-2 { transform: translate(calc(-50% + 181px), calc(-50% - 105px)); }
.poly-kaiten .box.box-3 { transform: translate(calc(-50% + 181px), calc(-50% + 105px)); }
.poly-kaiten .box.box-4 { transform: translate(calc(-50% + 0px), calc(-50% + 210px)); }
.poly-kaiten .box.box-5 { transform: translate(calc(-50% - 181px), calc(-50% + 105px)); }
.poly-kaiten .box.box-6 { transform: translate(calc(-50% - 181px), calc(-50% - 105px)); }

.poly-kaiten .box img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.12);*/
  position: relative;
  z-index: 10;
  animation: img-counter-rotate 30s linear infinite;
}

/* 親要素の時計回り回転 */
@keyframes big-rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* 画像の逆回転で常に上向き */
@keyframes img-counter-rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(-360deg);}
}

@media screen and (max-width: 768px) {
  
.news-outer{
	display: block;
}
	
.height400{
	height:100px;
}	
	
	.rotating-animation {
    width: 180px;
    height: 180px;
  }
  .rotating-animation span::before {
    width: 120px;
    height: 120px;
  }

	
	.poly-kaiten {
    width: 320px;
    height: 320px;
  }
  .poly-kaiten .box {
    width: 100px;
    height: 100px;
  }
  .poly-kaiten .box.box-1 { transform: translate(calc(-50% + 0px), calc(-50% - 150px)); }
  .poly-kaiten .box.box-2 { transform: translate(calc(-50% + 129px), calc(-50% - 75px)); }
  .poly-kaiten .box.box-3 { transform: translate(calc(-50% + 129px), calc(-50% + 75px)); }
  .poly-kaiten .box.box-4 { transform: translate(calc(-50% + 0px), calc(-50% + 150px)); }
  .poly-kaiten .box.box-5 { transform: translate(calc(-50% - 129px), calc(-50% + 75px)); }
  .poly-kaiten .box.box-6 { transform: translate(calc(-50% - 129px), calc(-50% - 75px)); }
  .poly-kaiten .box img {
    width: 100px;
    height: 100px;
  }
	
.about-text{
	text-align: center;
}

	.sp-center{
		text-align: center;
	}	
	
.tel-width {
    margin: 0 auto;
}	
	
}

@media screen and (max-width: 560px) {
  .rotating-animation {
    width: 140px;
    height: 140px;
  }
  .rotating-animation span::before {
    width: 100px;
    height: 100px;
  }
}

/* お問い合わせ
-------------------------------------*/
.formTable{
	max-width: 800px;
	margin: 2rem auto;
}

.formTable th {
    width: 30%;
	text-align: right;
}

.form-flex{display: flex;}

.required{
	color:#C1272D;
	font-size: 18px;
}

input[type="name"]{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="name"]{
	height: 38px;
    padding: 6px 10px;
    background-color: var(--white);
    border: 1px solid var(--dark-gray);
    box-shadow: none;
    box-sizing: border-box;
    font-size: 16px;
	border-radius: 0;
	width: 50%;
	font-weight: 500;
}

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    height: 38px;
    padding: 6px 10px;
    background-color: var(--white);
    border: 1px solid var(--dark-gray);
    box-shadow: none;
    box-sizing: border-box;
    font-size: 16px;
	border-radius: 0;
	width: 100%;
}
input,textarea,select{margin-bottom: 0;}
textarea {
    min-height: 190px;
    padding-top: 6px;
    padding-bottom: 6px;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
.btn-form-top {
	width: 200px;
	height: 50px;
	border: none;
	border-radius: 100px;
	font-size: 1.2em;
	font-weight: 400;
	transition: all .3s;
	cursor: pointer;
	margin: .25rem .5rem;
}
input[type="submit"],.btn-form-top {
	background-color: var(--white);
	border: 1px solid var(--deep-dark-gray);
	color: var(--deep-dark-gray);
}
input[type="reset"],input[type="button"]{
	background-color: var(--deep-dark-gray);
	border: 1px solid var(--deep-dark-gray);
	color: var(--white);
}
input[type="submit"]:hover,.btn-form-top:hover {
	background-color: var(--deep-dark-gray);
	color: var(--white);
}
input[type="reset"]:hover,input[type="button"]:hover {
	background-color: var(--white);
	color: var(--deep-dark-gray);
}
.btn-form-top {
	width: 240px;
    max-width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.form-contact th {
	vertical-align: text-top;
	text-align: right;
	font-size: clamp(16px, 2vw, 18px);
	padding-right: 2rem;
	padding-top: 2rem;
}
.form-mult input {margin-bottom: .5rem;}

.form-input__name {max-width: 200px;}
.form-input__age {max-width: 60px;margin-right: .5rem;}
.form-input__wide {width: 100%;}

/* SEO用 */
fieldset {
	padding: 0;
	border: none;
}
.visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 確認画面 */
/* PHP工房フォーム使用時
max-width:572px の
form input[type="submit"], form input[type="reset"], form input[type="button"]
だけは向こうでコメントアウト文にしてください */
#formWrap {
	width: 100%!important;
	max-width: 700px;
}
.tbl-form-confirm :is(th,td) {
	border: 1px solid var(--gray);
}
.tbl-form-confirm th {
	font-weight: normal;
    background: #efefef;
    text-align: left;
}
.tbl-form-confirm td {
	background-color: var(--white);
}

@media screen and (max-width: 960px) {
	.tbl-form.table960 th {text-align: left; padding-top: 0;}
	.tbl-form.table960 input:not(.input-post-code):not(.input-number):not([type="radio"]):not([type="checkbox"]),
	.tbl-form.table960 textarea {width: 100%;}
	.tbl-form.table960 input {margin: 0;}
	.tbl-form.table960 .form-mult input {margin-bottom: .5rem;}
	
	/* 確認画面 */
	.tbl-form-confirm.table960 :is(th,td) {padding: 1rem .5rem;}
	.tbl-form-confirm.table960 th {border-bottom: none;}
	.tbl-form-confirm.table960 tr:not(:first-of-type) th {border-top: none;}
}
@media screen and (max-width: 768px) {
	.tbl-form.table768 th {text-align: left; padding-top: 0;}
	.tbl-form.table768 input:not(.input-post-code):not(.input-number):not([type="radio"]):not([type="checkbox"]),
	.tbl-form.table768 textarea {width: 100%;}
	.tbl-form.table768 input {margin: 0;}
	.tbl-form.table768 .form-mult input {margin-bottom: .5rem;}
	
	.formTable th {
    width: 100%;
	text-align: left;
}
	
	/* 確認画面 */
	.tbl-form-confirm.table768 :is(th,td) {padding: 1rem .5rem;}
	.tbl-form-confirm.table768 th {border-bottom: none;}
	.tbl-form-confirm.table768 tr:not(:first-of-type) th {border-top: none;}
}
@media screen and (max-width: 560px) {
	.tbl-form.table560 th {text-align: left; padding-top: 0;}
	.tbl-form.table560 input:not(.input-post-code):not(.input-number):not([type="radio"]):not([type="checkbox"]),
	.tbl-form.table560 textarea {width: 100%;}
	.tbl-form.table560 input {margin: 0;}
	.tbl-form.table560 .form-mult input {margin-bottom: .5rem;}
	
	/* 確認画面 */
	.tbl-form-confirm.table560 :is(th,td) {padding: 1rem .5rem;}
	.tbl-form-confirm.table560 th {border-bottom: none;}
	.tbl-form-confirm.table560 tr:not(:first-of-type) th {border-top: none;}
}



/* その他
-------------------------------------*/
/* ページトップへ戻るボタン */
#page-top {
	position: fixed;
	right: 15px;
	bottom: -70px;
	z-index: 4;
	transition: bottom 0.3s ease-in-out;
}

#page-top.show {
    bottom: 20px; /* 表示時の位置 */
}

#page-top a {
	display: block;
	width: 50px;
	font-weight: bold;
	background-color: var(--sub-color_01);
	color: var(--white);
	text-align: center;
	padding: 15px 5px;
	border-radius: 5px;
	transition: background-color 0.3s;
}

@media screen and (max-width:1800px){
.about-img {
    position: absolute;
    top: 0;
    left: -10%;
}
	
.about-img img {
    width: 80%;
}	
	
.tape {
    right: -100px;
}	
	
}

@media screen and (max-width:1450px){

.about-img {
    left: 0;
}
	
.about-img img {
    width: 60%;
}
	
#production-area{
	padding-left: 0;
}
	
.tape {
    right: 0;
}	
	
}

@media screen and (max-width:1024px){

.tape {
    bottom: -185px;
   }	
	
}

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

@media screen and (max-width:768px){

.wrapper{
    padding: 0;
}
	
.pc-only{display: none;}
.sp-only{display: block;}	
	
header .head-area {
   padding: 0.5rem;
}
	
.fv {
    margin-left: 0;
    margin-right: 0;
	padding-left: 1rem;
	padding-right: 1rem;
}
	
.copyright {
    font-size: 8px;
    top: 50%;
	left: 0;
	right: 0;
	
	font-weight: 400;
    }
	
.muromachi img{
	width: 100%;
	}	
	
.arrow_box {
    justify-content: center;
    margin: 30px 0 0;
    }
	
.arrow_box2 {
    justify-content: center;
    margin: 30px 0 0;
    }	
	
.arrow_box3 {
    justify-content: center;
    margin: 30px 0 0;
    }
	
.arrow_box4 {
    justify-content: center;
    margin: 30px 0 0;
    }	
	
.arrow_box5 {
    justify-content: center;
    margin: 30px 0 0;
    }	
	
.muromachi{
	bottom: -10px;
	width: 90%;
}	
	
.oneArea {
  padding: 0;	
}	
	
.btn {
    bottom: -20%;
	z-index: 9998;
}
	
.btn-right {
    right: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
   }
	
	
.ttl-line {
    display: none;
   }
	
.center-line::after {
     display: none;
}	
	
.ttl-line-up {
   display: none;
}
	

    .white-box {
        left: 15%;
        top: 0;
        padding: 2rem;
        max-width: 400px;
    }

.btn-l {
    top: 10%;
    left: 15%;
    z-index: 9998;
}	
	
.con-ttl-margin{
	margin-right: 0;
}	
	
	.list-btn{
	margin: 2rem auto;
	text-align: center;
}
	
.foot-nav {
    padding: 0 0.5rem;
	text-align: center;
}
	
.mr20-pc { margin-right: 0; }	
	
.mr40-pc { margin-right: 0; }		
	
.tape {
    bottom: -145px;
   }
	
.white-box-about {
    margin: 0;
    }	
	
.px20-0 { padding-left: 0; padding-right: 0; }
	
.ex-list li{
	width: calc(100% / 2);
	}	
	
.head-accse3 {
    bottom: -15px;
    }
	
	.area-ttl, .area-sub {
    text-align: center;
}
	
	    .bt-about-sp {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 100%;
    }
	
	#production-area {
    margin: 2rem auto 0;
}
	
}

@media screen and (max-width:560px){
  

  .arrow_box {
    margin: 10px 0 0;
  }
	
	.arrow_box2 {
    margin: 10px 0 0;
  }
	
	.arrow_box3 {
    margin: 10px 0 0;
  }
	
	.arrow_box4 {
    margin: 10px 0 0;
  }
	
	.arrow_box5 {
    margin: 10px 0 0;
  }

  .prev-arrow,
  .next-arrow {
    width: 45px;
    height: 45px;
  }
	
	.line-up-area {
    background-size: contain;
    }
	
   .white-box {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	max-width: 100%;
	width: 100%;   
    }	
	
	.white-block {
    padding: 20px;
    }
	
	.ex-list li{
	width: 100%;
	}	
	
	.head-accse3 {
        bottom: -10px;
    }
	
	.head-accse2{
	    bottom: -5%;
}
	
}