@charset "utf-8";
/*****************************************************
	
	全ての要素をリセット
	各ブラウザの表示を統一するための設定です
	
*****************************************************/
html {overflow-y: scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;outline:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;}
table {	border-collapse: collapse;border-spacing: 0;}
caption,p {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;text-align:left;font-weight:normal;}
img,abbr,acronym,fieldset {border: 0;}
li {list-style-type: none;}
img{vertical-align:middle;}
.line {font-size:1px;line-height:1px;}
.right{
    text-align:right;
}
.center{
    text-align:center;
}

/*--- default ---*/
body {
	color: #111;
	font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	line-height:1.7rem;
	letter-spacing:0.05rem;
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
}
.f-ns-t{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.f-ns-el{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.f-ns-l{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.f-ns-m{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.f-ns-sb{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.f-ns-b{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.f-ns-eb{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.f-ns-black{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
table{
	border-collapse:collapse;
}

.clear{
	clear:both;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.bg-company{
	background: #dee7ee;
	/* padding-bottom: clamp(0.5rem, 5vw, 4rem); */
}
.bg-oginow{
	background: #ffe9f6;
	/* padding-bottom: clamp(0.5rem, 5vw, 4rem); */
}
.bg-story{
	background: #fff;
	padding-bottom: clamp(0.5rem, 5vw, 4rem);
}
.bg-contact{
	background: #dee7ee;
	padding-bottom: clamp(0.5rem, 5vw, 4rem);
}
.bg-news{
	background: #f6f4f0;
	padding-bottom: clamp(0.5rem, 5vw, 4rem);
}
.bg-works{
	background: #f9fafa;
	padding-bottom: clamp(0.5rem, 5vw, 4rem);
}
.bg-webdesign{
	background: #f4f3ef;
	padding-bottom: clamp(1.5rem, 10vw, 10rem);
	position: relative;
	z-index: 1;
}
.bg-openfactory{
	padding-bottom: clamp(1.5rem, 10vw, 10rem);
	position: relative;
}
.bg-hitozukuri{
	 background-image: url('../image/hitozukuri/iinkai-bg.svg');
	 background-size: 800px;
	 /* padding-bottom: clamp(0.5rem, 5vw, 4rem); */
	 position:relative;
}
@media screen and (max-width:800px)	{
	.bg-hitozukuri{
	background-size:70vw;
}
}
/*****************************************************
	
	コンテンツ
	
*****************************************************/
#wrap{
	width: 100%;
	height: auto;
	margin:0 auto;
}
a:link {
	color:#333;
	text-decoration:none;
}

a:visited{
	color:#333;
	text-decoration:none;
}

a:hover{                     
	text-decoration: none;
}

a:active{
	text-decoration:none;
}
.clear:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
a.links {
  position: relative;
  display: inline; 
  background-image: linear-gradient(to right, #111 100%, transparent 0%);
  background-repeat: no-repeat;
  background-size: 100% 1px; 
  background-position: 0 100%; 
  ransition: background-size 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
a.links[target="_blank"]::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.7em;
  margin-left: 0.5em;
  background-image: url('../image/common/gaibulink.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.7;
	top:-0.1rem;
	position:relative;
}
a.links:hover {
  background-size: 0% 1px; 
  opacity: 0.7;
}


a.file-links {
  position: relative;
  display: inline; 
	margin-left:2rem;
  background-image: linear-gradient(to right, #111 100%, transparent 0%);
  background-repeat: no-repeat;
  background-size: 100% 1px; 
  background-position: 0 100%; 
  ransition: background-size 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
a.file-links::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.7em;
  margin-left: 0.5em;
  background-image: url('../image/common/gaibulink.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.7;
	top:-0.1rem;
	position:relative;
}
a.file-links::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.25em;
	margin-right: 0.25em;
  background-image: url('../image/common/ic-download.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
	top:0.3rem;
	position:relative;
	left:-1.9rem;
	position:absolute
}
a.file-links:hover {
  background-size: 0% 1px; 
  opacity: 0.7;
}




* html .clear            { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
a,a img {
    transition: 0.3s ease-in-out;
}
a img:hover,.shopnav a:hover,.foot-nav a:hover  {
    opacity: 0.6;
    filter: alpha(opacity=60);
} 
a[href^="tel:"] {
    pointer-events: none;
}
@media screen and (max-width:768px)	{
a[href^="tel:"] {
    pointer-events: auto!important;
}

}
.ggmap {position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		box-sizing: border-box;}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

a.bt{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
a.bt .linkmark {
  width: 40px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #111;
  background: #fff;
  transform: skewY(-20deg);
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.bt .color-non {
 
  background: rgba(255,255,255,0);
  
}
a.bt .color-wh {
 border: 1px solid #fff;
  background: rgba(255,255,255,0);
}
a.bt .mark {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 12px;
  transform: skewY(20deg);
	left:-2px;
	top:-1px;
}
a.bt .mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 1px;
  background: #000;
  border-radius: 0.5px;
  transform: translateY(-50%);
  transition: width 0.3s ease, background-color 0.3s ease;
}
a.bt .color-wh .mark::before {
  background: #fff;
  
}
a.bt .mark::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid #111;
  border-right: 1px solid #111;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease, border-color 0.3s ease;
}
a.bt .color-wh .mark::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  
}
a.bt:hover .linkmark {
  background: #111;
  transition: background-color 0.3s ease;
}
a.bt:hover .color-wh {
  background: rgba(0,0,0,0);
  transition: background-color 0.3s ease;
}
a.bt:hover .mark::before {
  width: 18px;
  background-color: #fff; 
}

a.bt:hover .mark::after {
  right: -5px;
  border-top-color: #fff;
  border-right-color: #fff;
}
a.bt .txt-wh{
 color:#fff;
	
}

.contents-right{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.w-common{
	width: 85%;
	max-width:1200px;
	margin:0 auto;
}
.w-middle{
	width: 88%;
	max-width:1400px;
	margin:0 auto;
}
.w-mini{
	width: 88%;
	max-width:900px;
	margin:0 auto;
}
.w-max{
	width:100%;
	margin:0 auto;
}
.w-max-w1200{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.w-max-w1400{
	max-width: 1400px;
	margin-left:auto;
	margin-right:auto;
}
.w-max-w1000{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}
/* ================================
   メインヘッダー共通スタイル
================================ */
header {
  width: 100%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  z-index: 10;

}
header.page-header {

  position: absolute;

}
header .head-contents {
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 1.5rem 1.5rem;
 
}
header .headtitle-area {
  width: 260px;
}
header .headtitle-area img{
  width: 100%;
}

header .headutility-area {
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: -10px;
}
header .headutility-area .gnav-area{
  display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
 
}
/* グローバルナビ全体 */
header .gnav-pc ul {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	font-size: 0.85rem;
	margin: 0 1.5rem 0 0;
	font-weight: 500;
}

header .gnav-pc ul li {
	margin: 0 0.6rem;
	position: relative;
}

/* 下線アニメーション */
header .gnav-pc ul li:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #111;
	transition: 0.3s ease-in-out;
}

header .gnav-pc ul li:hover:before {
	width: 100%;
	background: #0067b4;
}

header .gnav-pc ul li:hover a {
	color: #0067b4;
}

/* サブメニュー（フェードアップ） */
header .gnav-pc ul li ul{
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	background: #fff;
	padding: 0.5rem 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 10;
	pointer-events: none;
	min-width: 220px;
	margin-left:-110px;
	border-radius:5px;
	box-shadow:0 0px 8px 2px rgba(0,0,0,0.2);
	padding:1rem;
	box-sizing:border-box;
}

header .gnav-pc ul li ul li{
	margin: 0;padding:0.1rem 0;
}
header .gnav-pc ul li ul li a{
	color:#111!important;
	display:block;
}
header .gnav-pc ul li ul li a:hover{
	opacity:0.7;
	padding-left:0.5rem;
}

/* 下線アニメーション */
header .gnav-pc ul li ul li:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 0px;
	background: #111;
}

header .gnav-pc ul li ul li:hover:before {
	width: 100%;
	background: #fff;
}





/* ホバーでサブメニュー表示 */
header .gnav-pc ul li:hover > ul {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* 白背景用のスタイル */
.page-wrap header .gnav-pc ul li a {
	color: #fff;
}

.page-wrap header .gnav-pc ul li:before {
	content: '';
	position: absolute;
	background: #fff;
}

.page-wrap header .gnav-pc ul li:hover:before {
	background: #fff;
}

@media screen and (max-width:1200px)	{
	header .head-contents {
}
header .headtitle-area img{
	margin-top:0.2rem;
}	
header .gnav-pc ul li {
	margin: 0 0.4rem;
}
header .gnav-pc ul .middle-menu{
	display:none;
}	
}
@media screen and (max-width:880px)	{
	
header .headtitle-area img{
	margin-top:0.2rem;
}	
	header .gnav-pc{
		display:none;
	}
	
}
@media screen and (max-width:640px)	{
header .head-contents {
  
  padding: 1.2rem 1.0rem;
 
}

}
/* ================================
   グローバルナビ（PC用）
================================ */
header .close-bt{
    display: block;
    position: fixed;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #0067b4;
    transition: all 1s;
    top:50px;
    right:50%;
	margin-right:30px;
    z-index: 2000;
    cursor: pointer;
}

header .close-bt span{
    display: inline-block;
    transition: all 0.8s;
    position: absolute;
    left: 14px;
    height: 1px;
    border-radius: 5px;
  background: #fff;
    width: 50%;
  }

	header .close-bt span:hover {
  transform: rotate(360deg);
}
	header .close-bt span:nth-of-type(1) {
  top: 21px;
  left: 17px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

header .close-bt span:nth-of-type(2) {
  top: 33px;
  left: 17px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

header .close-bt:hover span:nth-of-type(1) {
  transform: translateY(6px) rotate(-45deg + 360deg); 
  transform: translateY(6px) rotate(315deg);
}

header .close-bt:hover span:nth-of-type(2) {
  transform: translateY(-6px) rotate(405deg);
}
@media screen and (max-width:800px) {
	header .close-bt{
	margin-right:0;
		right:1.5rem;
		top:1.5rem;
	left:auto;
}
}
	.gnav-sp {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: #fff;
    z-index: 1000;
    padding: 3.5rem 1rem 2rem;
    transform: translateX(100%);
    transition: transform 0.8s ease;
    overflow-y:auto;
  }
	
  .gnav-sp.active {
    transform: translateX(0);
  }
  
	header .gnav-sp ul{
   
		border-bottom:0.5px solid;
  }
header .gnav-sp ul li ul{
   padding:0 0 0.2rem 1.5rem;
		border-bottom:0;
  }
header .gnav-sp ul li ul li{
   
		border:0;
  }
header .gnav-sp ul li {
    margin: 0 0rem;
    position: relative;
		border-top:0.5px solid;
  }
header .gnav-sp ul li a{
    display:block;
	padding:0.7rem 0 0.5rem 1.75rem;
	position:relative;
  }
header .gnav-sp ul li ul li a{
	padding:0rem 0 0.7rem 1.75rem;
  }
header .gnav-sp ul li a:hover{
    color:#009d8b;
  }
header .gnav-sp ul li a:before{
   content:'>';
	margin-right:0.75rem;
	font-size:0.8rem;
	left:0.5rem;
	position:absolute;
	transition: 0.3s ease-in-out;
}
header .gnav-sp ul li a:hover:before{
	
	left:0.8rem;
}

/* ================================
   ハンバーガーボタン
================================ */
.openbtn-wrap{
	overflow:hidden;
	width: 50px;
	height: 55px;
	padding: 10px 0 0;
}
.openbtn {
  position: fixed;
  cursor: pointer;
  width: 50px;
  height: 45px;
  border-radius: 50%;
  background: #111;
  transform: skewY(-20deg);
  /* top: 55px; */
  right: auto;
}
.openbtn.fixed {
  /* position: fixed; */
  /* top: -55px; */
  /* right: 15px; */
  /* transition: top 0.8s ease; */
}

.openbtn.fixed.fixed-move {
 /*  top: 15px; */
}

.openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 15px;
  height: 1px;
  border-radius: 5px;
  background: #fff;
  width: 20px;
	transform: skewY(20deg);
}

.openbtn span:nth-of-type(1) { top: 16px; }
.openbtn span:nth-of-type(2) { top: 21.5px; }
.openbtn span:nth-of-type(3) { top: 27px; }

.openbtn:hover span:nth-of-type(1) { top: 14px; }
.openbtn:hover span:nth-of-type(3) { top: 29px; }


/* ================================
   オーバーレイ背景
================================ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  z-index: -1;
  transition: background-color 1s ease, z-index 0s 1s;
}
.overlay.show {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 5;
  transition: background-color 0.5s ease;
}


/*****************************************************
	
	フッター
	
*****************************************************/
footer{
	background:#F7F7F7;
	padding:4rem 0;
}

footer .menu-area ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

footer .menu-area ul li {
	font-size: 0.88rem;
	margin: 0 0.75rem;
	font-weight: 500;
	position: relative;
}

footer .menu-area ul li:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #111;
	transition: 0.3s ease-in-out;
}

footer .menu-area ul li:hover:before {
	width: 100%;
	background: #0067b4;
}

footer .menu-area ul li a:hover {
	color: #0067b4;
}


@media screen and (max-width:850px) {
	footer .menu-area ul{
	display: block;
}
footer .menu-area ul li a{
	display:block;
	border-bottom:0.5px solid #111;
	padding:0.5rem 0.7rem 0.5rem 1.75rem;
	position:relative;
	
}
	footer .menu-area ul li:hover:before{
	width:0%;
}
footer .menu-area ul li a:before{
	content:'>';
	margin-right:0.75rem;
	font-size:0.8rem;
	left:0.5rem;
	position:absolute;
	transition: 0.3s ease-in-out;
}
footer .menu-area ul li a:hover:before{
	
	left:0.8rem;
}
footer .menu-area ul li ul {
    position: static;
    transform: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    background: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
  }

  /* 子メニュー展開時（JSで .open クラスが付与される） */
  footer .menu-area ul li.open > ul {
    opacity: 1;
    max-height: 500px; /* 十分な高さにしておく */
    pointer-events: auto;
    padding: 0.5rem 0 0 0;
  }

  /* 子メニュー項目 */
  footer .menu-area ul li ul li a {
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
  }	
}

footer .info-area{
	padding:0 5%;
	max-width:1000px;
	margin:0 auto;
}
footer .foot-logo{
	max-width:350px;
	width:85%;
	margin: 3.5rem auto 2rem;
}
footer .foot-logo img{
	width:100%;
}
footer .addarea{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: stretch;
	align-items: stretch;
	font-size:0.8rem;
	line-height:1.3rem;
}
footer .addarea .name{
	font-weight:500;
	margin-bottom:0.25rem;
}
footer .addarea li{
	border-right:0.5px solid;
	padding:0 2.5rem;
	width:33%;
}
footer .addarea li:first-child{
	padding-left:0;
}
footer .addarea li:last-child{
	padding-right:0;
	border-right:0;
}
footer .addarea span:before{
	content:'／';
}
@media screen and (max-width:1000px) {
footer .addarea span{
	display:block;
}	
	footer .addarea span:before{
	content:'';
}	
}
@media screen and (max-width:600px) {
	footer .foot-logo{
	margin-bottom:1.5rem;
}
	footer .addarea{
	display: block;
}
	footer .addarea li{
	border-right:0;
	width:100%;
		background:#fff;
		box-sizing:border-box;
}
footer .addarea li,
footer .addarea li:first-child,
footer .addarea li:last-child{
	padding:1rem;
	margin-bottom:0.5rem;
	border-radius:5px;
}
footer .addarea span{
	display:inline;
}	
footer .addarea span:before{
	content:'／';
}
}
footer .foot-submenu,
footer .footbottom{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	margin: 1.5rem auto;
	font-size:0.8rem;
}
footer .foot-submenu .txtmenu{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
footer .foot-submenu .txtmenu li{
	position:relative;
	margin:0 2rem 0 0;
	padding-left:1.0rem;
}
footer .foot-submenu .txtmenu a:hover{
	color:#009d8b;
}
footer .foot-submenu .txtmenu li a:before{
	content:'>';
	margin-right:0.25rem;
	position:absolute;
	left:0;
	transition: 0.3s ease-in-out;
}
footer .foot-submenu .txtmenu li a:hover:before{
	left:0.25rem;
}
footer .foot-submenu .snsmenu{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
}
footer .foot-submenu .snsmenu li a{
	width:40px;
	height:40px;
	background:#fff;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	margin:0 0.25rem;
	border-radius:50%;
}
footer .foot-submenu .snsmenu li:first-child img{
	width:10px;
}
footer .foot-submenu .snsmenu li:nth-child(2) img{
	width:20px;
}
footer .foot-submenu .snsmenu li a:hover{
	opacity:1;
	background:#009d8b;
}
footer .pmark img{
	width:50px;
}

footer .copyright{
	font-size:0.7rem;
	font-weight:500;
}
@media screen and (max-width:700px) {
	footer .foot-submenu .txtmenu{
	display: block;
}
}

/*****************************************************
	
	ページコンテンツ
	
*****************************************************/
#contents{
 
}
	
#front-main{
	/* overflow:hidden; */
	/* width:100%; */
}

	
#front-main .inner .copy{
	position:absolute;
	/* top: clamp(10rem,30vh,50rem); */
	/* left: 2.5rem; */
	margin-left:0;
}


#front-main .inner{
	position:relative;
	margin-top: -10rem;
	height: 105vh;
	max-height:1200px;
	overflow:hidden;
}
#front-main .inner .copy{
	position:absolute;
	bottom: 14vw;
	right: 50%;
	margin-right: -48vw;
	/* background: #ccc; */
	/* width: 30vw; */
}
#front-main .inner .copy .maincopy{
	font-size:clamp(2.8rem,3.3vw,5.5rem);
	font-weight:800;
	line-height:1.3;
	letter-spacing:0.1rem;}
#front-main .inner .copy .maincopy-en{
	font-size:clamp(1rem,2vw,1.4rem);
	font-weight:600;
	letter-spacing:0.07rem;
	margin-top:clamp(0.7rem,3vw,1.0rem) ;
	margin-left:0.2rem;
}
#front-main .inner .copy .maincopy-en span{
	display:block;
	font-size:clamp(0.8rem,1.5vw,1.0rem);
	margin-top:clamp(0.15rem,3vw,0.25rem) ;
	font-weight:300;
	
}

@media screen and (max-width:1400px) {
#front-main .inner .copy{
	bottom: 19vw;
}

	
}
@media screen and (max-width:1250px) {
#front-main .inner .copy{
	position:absolute;
		top: 10.2rem;

	left: 2.0rem;
	margin-left:0;
	
}
	#front-main .inner .copy .maincopy{
	font-size: clamp(1.5rem,4vw,1.8em);
	line-height: 1.4;
}
#front-main .inner .copy .maincopy-en{
	font-size:clamp(0.9rem,2.53vw,1.1rem);
	margin-top:clamp(0.2rem,3vw,0.5rem) ;
	margin-left:0.2rem;
}
#front-main .inner .copy .maincopy-en span{
	font-size:clamp(0.75rem,1.5vw,1.0rem);
	margin-top:0 ;
	
}
}
@media screen and (max-width:640px) {
#front-main .inner .copy{
	position:absolute;
		top: 9.5rem;

	left: 1.2rem;
}
	#front-main .inner .copy .maincopy{
	font-size: clamp(1.5rem,4vw,1.8em);
	line-height: 1.4;
}
#front-main .inner .copy .maincopy-en{
	font-size:clamp(0.85rem,2.53vw,1.1rem);
	margin-top:clamp(0.2rem,3vw,0.5rem) ;
	margin-left:0.1rem;
	line-height:1.8
}
#front-main .inner .copy .maincopy-en span{
	font-size:clamp(0.70rem,1.5vw,1.0rem);
	
}
}

.frontmovie {
  position: relative;
  width: auto;
  left: -10vw;
  height: 100vh;
  max-height:1200px;
	min-height:800px;
  z-index: -1;
  bottom:0;
  -webkit-mask-image: url("../image/common/otonari-oval.svg");
  mask-image: url("../image/common/otonari-oval.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 85vw auto;
  mask-size: 85vw auto;
  -webkit-mask-position: 0 100%;
  mask-position: 0 bottom;
  will-change: mask-image;
}
.frontmovie:after{
  position: absolute;
  background-image: url('../image/common/dotted.webp'); 
  background-size: 10px;
	content:'';
	background-repeat:repeat;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}

.frontmovie video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
	 min-height: 950px;
  width: auto;
  object-fit: cover;
  transform: translate(-50%, -50%);
}


@media screen and (max-width:1700px) {
.frontmovie {
  
  left: -200px;
  
  -webkit-mask-size: 90vw auto;
  mask-size: 1400px auto;
  -webkit-mask-position: 0 100%;
  mask-position: 0 bottom;
  will-change: mask-image;
}


}
@media screen and (max-width:1500px) {
.frontmovie {
  left: -20vw;
  height: 100vh;
  max-height:1200px;
  bottom:0;
  mask-size: 1400px auto;
  mask-position: right bottom;

}	.frontmovie video {
  top: 50%;
  left: auto;
	right:0%;
  transform: translate(0%, -50%);
}
}



@media screen and (max-width: 1250px) {
  
	#front-main .inner{
	height: 68rem;
	
} 
	.frontmovie {
  left: auto;
		
  height: 78rem;
		width:100%;
	max-height:unset;
	 min-height:unset;
	bottom:auto;
 top:clamp(15rem,50vw,18rem);

  mask-size: 150vw auto;
		-webkit-mask-position: 0 0%;
		mask-position:-30vw 0;
		
  transform-origin: center;
}
.frontmovie video {
	position: relative;
	transform-origin: center;
	top: 20rem;
	left: 50%;
	height:50rem;
	max-height:unset;
	min-height:unset;
	transform: translate(-50%, -40%);
}
}





@media screen and (max-width: 600px) {
  #front-main .inner{
	
	height: 52rem;
	min-height:auto;
	overflow:hidden;
} 
	#front-main .inner{
	height: 46rem;
	min-height:auto;
	overflow:hidden;
} 
	.frontmovie {
  left: -30vw;
  height: 58rem;
		width:49rem;
	max-height:unset;
	 min-height:unset;
	bottom:auto;
 top:clamp(9rem,30vw,15rem);
 -webkit-mask-size: auto 100vh;
  mask-size: auto 55rem;
		-webkit-mask-position: 5vw 0%;
		mask-position: 10vw 0rem;
		transform: rotate(30deg);
  transform-origin: center;
}
.frontmovie video {
	position: relative;
	transform-origin: center;
	top: 8rem;
	left: 50%;
	height:30rem;
	max-height:unset;
	min-height:unset;
	transform: rotate(-30deg) translate(-50%, -50%);
}
}
#front-main .top-baner{
	width: 22.5vw;
	position:absolute;
	right: 3rem;
	bottom: 6vw;
	/* max-width: 300px; */
	min-width: 290px;
}
	


#front-main .top-baner img{
	width:100%;
		border-radius:5px;
box-shadow:0px 0px 0px 0px #ccc;
}
#front-main .top-baner img:hover{
	opacity:1;
box-shadow:4px 4px 8px 0px #ccc;
}
@media screen and (max-width:1400px) {

	#front-main .top-baner{
	
	bottom: 9vw;

}
	
}

.scroll {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #111;
    position: absolute;
    right: 2.3rem;
    top: 10rem;
    font-size:0.8rem;
}

/* 線のアニメーション部分 */
.scroll::before {
    background: #111;
    bottom: -5rem;
    content: "";
    height: 4rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}
.scroll::after {
    content: "●";
    font-size: 0.6rem;
    color: #111;
    position: absolute;
    left: -0.5px;
    bottom: -115px;
    animation: scroll-dotted 3s infinite;
}


/* 矢印のアニメーション */
@keyframes scroll-dotted {
    0% {
        transform: translateY(-6rem);
    }
    50% {
        transform: translateY(-2rem);
    }
    51% {
        transform: translateY(-2rem);
    }
    100% {
        transform: translateY(-2rem);
    }
}

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

	
	.scroll {
    font-size:0rem;
    right: auto;
	left:1.75rem;
    bottom: auto;
	top:18.3rem;
}

#front-main .top-baner{
	width: 37vw;
	left: auto;
	right: 1.2rem;
	top: 10rem;
	max-width: 250px;
}
	/* 線のアニメーション部分 */
.scroll::before {
    bottom: -5rem;
    height: 3rem;
	
    
}
.scroll::after {
    content: "●";
    font-size: 0.5rem;
   
    bottom: -115px;
    animation: scroll-dotted 3s infinite;
}


/* 矢印のアニメーション */
@keyframes scroll-dotted {
    0% {
        transform: translateY(-5rem);
    }
    50% {
        transform: translateY(-2rem);
    }
    51% {
        transform: translateY(-2rem);
    }
    100% {
        transform: translateY(-2rem);
    }

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

#front-main .top-baner{
	width: 38.5vw;
	left: auto;
	right: 1.0rem;
	top: 10rem;
	max-width: 250px;
	min-width:auto;
}
	
}
@media screen and (max-width:640px) {

	
	.scroll {
    font-size:0rem;
    right: auto;
	left:0.7rem;
    bottom: auto;
	top:16.3rem;
}
}
#mv-area .inner{
	margin:5rem auto 7rem;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	width:100%;
	overflow:hidden;
}
#mv-area .inner .copy-area .mv-title{
	font-size:0.8rem;
	font-weight:600;
	letter-spacing:0.1rem;
	margin-bottom:0.5rem;
}
#mv-area .inner .copy-area .mv-title .txt-v{
	margin-right:0.5rem;
	color:#0068b5;
}
#mv-area .inner .copy-area .mv-title .txt-m{
	margin-left:0.5rem;
	color:#009d8b;
}
#mv-area .inner .copy-area .txt-main{
	font-size:3rem;
	font-weight:800;
	line-height:4rem;
}
#mv-area .inner .subcopy-area{
	font-size:1rem;
	font-weight:500;
	line-height:1.8rem;
	margin: 2.7rem 0 0 2rem;
}
@media screen and (max-width: 900px) {
	#mv-area .inner{
	margin: 8vw auto 15vw;
	display: block;
	width: fit-content;
	padding: 0 2rem;
}
	@media screen and (max-width: 640px) {
	#mv-area .inner{
	margin-top:clamp(3rem,8vw,6rem);
}
	}
#mv-area .inner .copy-area .txt-main{
	font-size: clamp(1.0rem,8.8vw,2.7rem);
	line-height: 1.4; 
}
#mv-area .inner .subcopy-area{
	font-size: clamp(0.8rem, 3.5vw,1.06rem);
	line-height: 2;
	margin: 3.5vw 0 0 0;
}
}

#about-area{
	background: #f8f6f3;
	padding: 7rem 0 8rem;
	overflow: hidden;
	width: 100%;
}
#about-area .inner{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	
}
@media screen and (max-width:1000px) {
#about-area .inner{
	
	width: 100%;
	margin-left: 0;
}
}
#about-area .about-info{
	width:calc(100% - 90rem);
	padding-left: 15%;
	padding-right:0%;
	padding-top:2rem;
	margin-right: 4rem;
}
#about-area .about-slide{
	width:90rem;
	overflow:hidden;
	padding: 2.5rem 2rem 2rem 0;
	position: relative;
	margin: 0;
	box-sizing: border-box;
}
.swiper-button-prev2 {
    right: 5.0rem;
	top:0.5rem!important;
}

.swiper-button-next2 {
    right: 2.0rem;
	top:0.5rem!important;
}
@media screen and (max-width:1800px) {
	#about-area .about-info{
	width:calc(100% - 75rem);
	padding-left: 15%;
		margin-right: 4rem;
}
#about-area .about-slide{
	width:75rem;
	
}
}
@media screen and (max-width:1500px) {
	#about-area .about-info{
	width:18rem;
	padding-left: 8%;
	margin-right: 3rem;
}
#about-area .about-slide{
	width: calc(100% - 18rem);
	overflow:hidden;
	
}
	.swiper-button-prev2 {
    right: 5.0rem;
}

.swiper-button-next2 {
    right: 2.0rem;
}
}
#about-area h2{
	color:#0068B4;
	font-size:4rem;
	font-weight:800;
	
}
#about-area h2 span{
	color:#111;
	display:block;
	font-size:0.9rem;
	margin:1.5rem 0 0 0rem;
}
#about-area .about-info p{
	margin:3rem 0;
	color:#111;
	display:block;
	line-height:2.0rem;
}



.swiper2 {
    width: 100%;
	padding:0 2rem 0 1rem;
}
.swiper2 .swiper-slide{
	transform: scale(0.9)!important;
	transition: transform 0.3s ease;
}
.swiper2 .is-active-slide{
	transform: scale(0.9)!important;
	left:0;
}
@media screen and (max-width:800px) {
	.swiper2 .swiper-slide{
	margin-top:1rem;transform: scale(0.85)!important;
	transition: transform 0.3s ease;
}
.swiper2 .is-active-slide{
	transform: scale(0.95)!important;
	left:0;
}
}
.swiper2 .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.swiper2.swiper-horizontal > .swiper-pagination-progressbar,
.swiper2 .swiper-pagination-progressbar.swiper-pagination-horizontal {
   top: auto;
    bottom: 0; 
    height: 6px; 
}

.swiper2 .swiper-pagination-progressbar {
    background-color: #999;
}

.swiper2 .swiper-pagination-progressbar-fill {
    background-color: #0068b4!important;
}

.swiper-button-prev2,
.swiper-button-next2 {
    color: #000;
    position: absolute;
    top: 1rem;
    z-index: 1;
	background:#fff;
	border-radius:50%;
	width:2.5rem;
	height:2.5rem;
	text-align:center;
	line-height:2.5rem;
	font-size:0.75rem;
	cursor:pointer;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.swiper-button-prev2:hover,
.swiper-button-next2:hover {
    color: #fff;
   background:#0068b3;transform: scale(1.1);
}

@media screen and (max-width:800px) {
	#about-area h2{
	font-size:clamp(3rem,10vw,4.0rem);
	line-height: 1;
	text-align: center;
}
#about-area h2 span{
	
  margin-top:clamp(0.2rem,3vw,1.2rem);
}
  #about-area{
	padding: 5rem 0 3rem;
}
	#about-area .about-info{
	padding: 0 2rem;
	margin-right: auto;
		margin-left:auto;
	width: fit-content;
}
  
#about-area .about-info p{
	margin:2rem 0;
	color:#111;
	display:block;
	font-size: max(0.9rem, 2vw);
	line-height: max(1.6rem, 4vw);
	max-width: 450px;
}
	#about-area .inner{
	display: block;
}
#about-area .about-slide{
	width: 90%;
	margin: 0.25rem 0 1rem 10%;
}
		.swiper-button-prev2 {
    right: 4.0rem;
}

.swiper-button-next2 {
    right: 1.0rem;
}
}


#about-area .about-box{
	background:#fff;
	border-radius:15px;
	padding:clamp(1.8rem,7vw,3rem);
}
#about-area .about-box .nomver{
	font-weight:500;
	color:#0068b4;
	margin-bottom:1rem;
  font-size:clamp(1.2rem,4vw,1.5rem);
}
#about-area .about-box h3{
	font-weight:800;
	text-align:center;
	font-size:clamp(1.5rem,2.5vw,2rem);
	line-height:1.5;
}
#about-area .about-box .image{
	height:15rem;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
#about-area .about-box .image img{
	width: 120px;
}
#about-area .about-box .txt{
	font-size:clamp(0.93rem,2.0vw,1.1rem);
	line-height:1.7;
	padding: 0 0rem;
	min-height: 4rem;
  width:100%;
  max-width:330px;
  margin:0 auto 0.5rem;
}


@media screen and (min-width: 760px) and (max-width: 950px) {
#about-area .about-box{
	padding:1.5rem 1.5rem;
}

#about-area .about-box h3{
	
	font-size:1.4rem;
	line-height:2.2rem;
}
#about-area .about-box .image{
	height:12rem;
	
}
#about-area .about-box .image img{
	width:120px;
}
#about-area .about-box .txt{
	font-size:0.9rem;
	line-height:1.5rem;
	padding:0 0.5rem 1rem;
}	
}
@media screen and (max-width:800px) {
	#about-area .about-box .image{
	height:10rem;
	
}
	#about-area .about-box .image img{
	width:90px;
}
}
#rekishi-area .inner{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin:clamp(4rem,10vw,10rem);
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
#rekishi-area .inner .photo-area,
#rekishi-area .inner .comment-area{
	box-sizing:border-box;
}
#rekishi-area .inner .photo-area{
	width:60%;
}
#rekishi-area .inner .comment-area{
	width:40%;
}
#rekishi-area .inner .photo-area{
	position:sticky;
	top:-2rem;
}
#rekishi-area .inner .photo-area .slide-inner{
	
}
#rekishi-area .inner .photo-area .slide-inner .swiper{
	height:calc(100vh + 4rem);
	border-radius: 0 10px 10px 0;
}
#rekishi-area .inner .photo-area .slide-inner .swiper-pagination{
	bottom:3rem;
}

#rekishi-area .inner .photo-area .slide-inner img{
	width:100%;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#rekishi-area .inner .comment-area{
	padding:clamp(4rem,5vw,5rem)
}
#rekishi-area .inner .comment-area .comment-inner{
	max-width:430px;
	margin:0 0 0 5%;

	padding:25vw 0 35vw;
}
#rekishi-area .inner .comment-area h2{
	text-align:left;
	font-size:2rem;
	font-weight:800;
	line-height:2.8rem;
}

@media screen and (max-width:1200px) {
	#rekishi-area .inner .comment-area .comment-inner{
	max-width:500px;
	margin:0 auto;
}

	#rekishi-area .inner .photo-area{
	width:55%;
}
#rekishi-area .inner .comment-area{
	width:45%;
}
}

#rekishi-area .inner .comment-area h2 span{
	display:block;
	font-size:1.1rem;
	font-weight:500;
	margin-top:1rem;
}
#rekishi-area .inner .comment-area p{
	margin:4rem 0 2rem;
	line-height:2.2rem;
	font-weight:500;
}
#rekishi-area .inner .comment-area .logo-aniv{
	max-width: 400px;
	width:100%;
	margin:5rem auto 3rem;
	display:block;
	border-radius:10px;
	overflow:hidden;
}
#rekishi-area .inner .comment-area .logo-aniv img{
	width: 100%;
	
}

@media screen and (max-width:1200px) {
#rekishi-area .inner .comment-area h2{
	text-align:center;
	
}
	#rekishi-area .inner{
	display: block;
	margin: 3rem 0 5rem;
}

#rekishi-area .inner .photo-area{
	width:100%;
	z-index:-1;
	top:0;
	margin:0 auto;
	
}
#rekishi-area .inner .photo-area:before{
	content:'';
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.0);
	z-index:10;
	position:absolute;
	border-radius: 0;
	transition: background 0.5s ease;
}
#rekishi-area .inner .photo-area.overlay-visible::before {
  background: rgba(0, 0, 0, 0.6);
}


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

#rekishi-area .inner .photo-area {
  border-radius: 20px;
  overflow: hidden;
  transition: all 1.5s cubic-bezier(0.6, 0.05, 0.39, 1.03);
	transform:scale(0.7);
	width:0;
}
#rekishi-area .inner .photo-area.active {

	height:97vh;
  border-radius: 10px;
	transform:scale(1);
	  width: 93%;
}

		
	}
#rekishi-area .inner .photo-area .slide-inner .swiper{
	height:calc(100vh + 5rem);
	border-radius: 0px;
}
#rekishi-area .inner .comment-area{
	width:100%;
	padding:8rem 0;
}
#rekishi-area .inner .comment-area p{
	margin:4rem 0 2rem;
	line-height:2.0rem;
	font-weight:400;
}
#rekishi-area .inner .comment-area .comment-inner{
	max-width:500px;
	width:100%;
	border-radius:5px;
	padding: 5rem 3rem 6rem;
	box-sizing:border-box;
	color:#fff;
}
	
#rekishi-area .inner .comment-area p{
	margin:3rem 0 2rem;
	
}
#rekishi-area .inner .comment-area .logo-aniv{
	max-width:380px;
	width:90%;
	margin:10vw auto;
	display:block;
}
}
.scroll-wrapper {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
	margin:-2rem auto;
}

.scroll-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 30s linear infinite;
}

.scroll-text {
  display: inline-block;
  padding-right: 1.5rem;
  font-size: 6rem;
	line-height:15rem;
	font-weight:800;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media screen and (max-width:800px) {
	.scroll-wrapper {
 
	margin:-5vw auto -5vw;
}
.scroll-track {
  animation: scroll-left 15s linear infinite;
}
.scroll-text {
  font-size: 14vw;
	line-height:30vw;
	font-weight:800;
}
}  


#front-banaer{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(5rem,5vw,0rem);
	border-top: 1px solid #ccc;
	padding-top: clamp(0rem,8vw,7rem);
	overflow: hidden;
}
#front-banaer h2{
	font-size:3rem;
	font-weight:200;
	margin:0 0 3.0rem 1rem;
	
}
#front-banaer h2 span{
	color:#111;
	display:block;
	font-size:0.9rem;
	margin:0 0 1rem 0rem;
	font-weight:400;
}
#front-banaer ul{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	padding:0 ;
}
#front-banaer ul li{
	width:30%;
	margin:0 1.66%;
	margin-bottom: clamp(1.5rem,6vw,3rem);
}

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

#front-banaer ul{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding:0 0;
}
#front-banaer ul li{
	width:47%;
	margin:0 1.5%;
	margin-bottom: clamp(1.5rem,6vw,3rem);
}
	#front-banaer ul li.sp-wmax{
	width:97%;
	margin:0 1.5%;
	margin-bottom: clamp(1.5rem,6vw,3rem);
}
}

#front-banaer ul li .image-area{
	border-radius: 8px 50px 8px 30px;
			margin-bottom:clamp(0.25rem,3vw,1.0rem);
	overflow:hidden;
}
#front-banaer ul li img{
	width:100%;
	transition: transform 0.5s ease;
}
#front-banaer ul li a:hover img {
  transform: scale(1.05); 
	opacity:1;
}


#front-banaer ul li .title span {
	font-size:1.1rem;
	font-weight:800;
	display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.4s ease;
}

#front-banaer ul li a:hover .title span {
  background-size: 100% 2px;
	
}
#front-banaer ul li .infotxt{
	font-size:0.85rem;
	line-height:1.3rem;
	color:#777;
	margin-top:0.25rem;
}

@media screen and (max-width:900px) {
#front-banaer{
		margin: 3rem auto 0rem;
		margin-bottom: clamp(5rem,5vw,0rem);
		/* border-top: 0px solid #ccc; */
}
}
@media screen and (max-width:600px) {
	#front-banaer ul{
	display: block;
}

#front-banaer ul li,#front-banaer ul li.sp-wmax{
	width: 97%;
	margin-left:auto;
	margin-right:auto;
}
}

#front-news{
	margin: 0rem auto 0;
	padding: 4rem 0 5rem;
	background:#f6f4f0;
}
#front-news .inner{
	width: 95%;
	margin:0 auto;
}
#front-news h2{
	font-size:3rem;
	font-weight:200;
	margin:0 0 3.0rem 1rem;
	
}
#front-news h2 span{
	color:#111;
	display:block;
	font-size:0.9rem;
	margin:0 0 1rem 0rem;
	font-weight:400;
}
#front-news ul{
	margin:0 auto 3rem;
	width: 98%;
}
#front-news ul li a,
.archive-content .news-box ul li a{
	background:#fff;
	display:block;
	padding:1.5rem 1.5rem;
	border-radius:10px;
	margin-bottom:0.75rem;
}
#front-news ul li a:hover,
.archive-content .news-box ul li a:hover{
	background:#e9e4db;
}
#front-news ul li:last-child a,
.archive-content .news-box ul li:last-child a{
	
	margin-bottom:0rem;
}
#front-news ul li article,
.archive-content .news-box ul li  article{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
#front-news ul li article time,
.archive-content .news-box ul li  article time{
	font-size:0.9rem;
	width:9rem;
	color:#0068b5;
	padding-left:1rem;
}
#front-news ul li a[target="_blank"] h3::after ,
.archive-content .news-box ul li a[target="_blank"] h3::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.7em;
  margin-left: 0.5em;
  background-image: url('../image/common/gaibulink.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.7;
  top: -0.1rem;
  position: relative;
}
#front-news .contents-right{
	padding-right:3.5%;
	 transform: scale(0.9);
	 transform-origin: top right;
}
@media screen and (max-width:800px) {
	#front-news ul li article,
	.archive-content .news-box ul li  article{
	display: block;
}
	#front-news ul li article time,
	.archive-content .news-box ul li  article time{
	width:100%;
	padding-left:0rem;
}
}

.slide-area{
	position:relative;
	z-index:1;
	width: 100%;
	margin:0;
	overflow:hidden;
}
.slide-area li{
	 background-image: url('../image/front/sc-slide005.webp'); 
	background-size:cover;
}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 70s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 4.5);
}
.scroll-infinity__item>img {
  width: 100%;
}
@media screen and (max-width:1200px){
	.scroll-infinity__item {
  width: calc(100vw / 3.0);
}
}
@media screen and (max-width:600px){

	.scroll-infinity__item {
  width: calc(100vw / 1.7);
}
}

#contact-area{
	margin:7rem 0;
}

#contact-area a{
	 /*! width: 85%; */
	 margin: 0 auto;
	 display:block;
}
#contact-area .contact-box {
  width: 90%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
  border-radius: 15px;
  overflow: hidden;
  padding: 10vw 3rem 8vw;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
#contact-area .contact-box {

  padding: 8rem 3rem 6.5rem;

}
}
	@media (max-width: 1300px) {
#contact-area a{
	 width: 85%;
  
}
}
#contact-area .contact-box:before {
 content:'';
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	position:absolute;
	top:0;
	left:0;
	 z-index: -1;
	transition: background 0.4s ease;
}
#contact-area .contact-box .bg {
  background: url(../image/common/contact-bg.webp) no-repeat center;
  background-size: cover;
  height: 170%;
  width: 100%;
  position: absolute;
  top: -90%;
  left: 0;
  z-index: -2;
  will-change: transform;
  transition: transform 0.1s linear;
}
#contact-area .contact-box .inner{
	color:#fff;
}
#contact-area .contact-box .inner .title{
	font-size:2.8rem;
	font-weight:800;
	margin:0 0 1.75rem;
	letter-spacing:0.1rem;
}
#contact-area .contact-box .inner .txt{
	font-size:0.9rem;
	font-weight:500;
	margin:0 0 1rem;
	line-height:1.4rem;
}
#contact-area a:hover .contact-box:before {
  background: rgba(0, 0, 0, 0.3);
}
@media screen and (max-width:600px){
#contact-area{
	margin:4rem 0;
}

#contact-area a{
	 width: 87%;
  
}
	#contact-area .contact-box {
  padding: 4rem 2.5rem 8rem;
	
}
	
#contact-area .contact-box .bg {
  height: 165%; 
  width: 100%;
  position: absolute;
  top: -85%; 
  z-index: -2;
  will-change: transform;
  transition: transform 0.1s linear;
}
	#contact-area .contact-box .inner .title{
	font-size:2.3rem;
	text-align:center;
}
#contact-area .contact-box .inner .txt{
text-align:center;
}
	#contact-area .contact-box .inner .txt span{
display:block;
}
}


#contact-area .linkmark{
  width: 40px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  transform: skewY(-20deg);
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
	position:absolute;
	right:1rem;
	bottom:2rem;
}


#contact-area .mark{
  position: relative;
  display: inline-block;
  width: 13px;
  height: 12px;
  transform: skewY(20deg);
	left:-2px;
	top:-1px;
}
#contact-area .mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 1px;
  background: #000;
  border-radius: 0.5px;
  transform: translateY(-50%);
  transition: width 0.3s ease, background-color 0.3s ease;
}

#contact-area .mark::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid #111;
  border-right: 1px solid #111;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease, border-color 0.3s ease;
}

#contact-area a:hover .linkmark {
  background: #111;
  transition: background-color 0.3s ease;
}

#contact-area a:hover .mark::before {
  width: 18px;
  background-color: #fff; 
}

#contact-area a:hover .mark::after {
  right: -5px;
  border-top-color: #fff;
  border-right-color: #fff;
}

.message-blur {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 200;
  margin: 8rem 0;
}
@media (max-width: 1200px) {
	
.message-blur {
  font-size: 1.5rem;
  margin: 8rem 0;
}
}
.letter {
  opacity: 0;
  display: inline-block;
  filter: blur(4px);
  transform: translateY(10px);
}
.letter.visible {
  animation: showBlur 0.6s ease forwards;
}

@keyframes showBlur {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.line-break {
  display: none;
}

@media (max-width: 800px) {
  .line-break {
    display: inline-block;
    width: 100%;
    height: 0;
  }
	.message-blur {
    text-align: center;
    font-size: 1.6rem;
  }
}

/*****************************************************
	
	ページ
	
*****************************************************/

.image-head {
  position: relative;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  -webkit-mask-image: url("../image/common/pagehead-oval.svg");
  mask-image: url("../image/common/pagehead-oval.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 160vw auto;
  mask-size: 160vw auto;
  -webkit-mask-position: -25vw bottom;
  mask-position: -25vw bottom;
  will-change: mask-image;
  width:auto;
  min-height: 350px;
  height: 50vw;
  max-height: 600px;
  background: url(../image/common/logo-otonari-wh-ar.svg) no-repeat top -15vw right -40vw;
  background-size:100vw;
  background-color: #b3b0aa;
  z-index: 1;
}
@media (max-width: 400px) {
.image-head {
 
  background: url(../image/common/logo-otonari-wh-ar.svg) no-repeat top 15vw right -40vw;
  
}
}

.image-head:before {
   position: absolute;
	content:'';
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.0);
}
.about-head {
    background-color: rgb(18 91 146);
}
.openfactory-head {
    background-color: rgb(207 182 132);
}
.contact-head,.entry-head{
	background-color: rgb(18 91 146);
}
.oginow-head {
  background: url(../image/oginow/head-oginow.jpg) no-repeat center;
  background-size: cover;
}
.oginow-head:before {
  	background:rgba(0,0,0,0.3);
}
.webdesign-head {
  background: url(../image/webdesign/head-design.webp) no-repeat center;
  background-size: cover;
}
.webdesign-head:before {
  	background:rgba(0,0,0,0.3);
}
.single-head {
    background-color: rgb(18 91 146);
}
.archive-head {
    background-color: rgb(18 91 146);
}
.notfound-head,.credits-head {
    background-color: rgb(18 91 146);
} {
    background-color: #9E9E9E;
}
.history-head {
    background-color: #af9e6dd1;
}
.thanks-head {
    background-color: #c2b48c;
}
.recruit-head {
    background-color: #bdba83;
}
.works-head {
    background-color: #b5b0a4;
}
.special-head {
background-color: #efbaaf;
}
.service-head {
    background-color: #5da4b1;
}
.hitozukuri-head {
	 background: url(../image/hitozukuri/bg.webp?01) top;
	 background-size: 3000px;
	 background-repeat:repeat;
}
@media (max-width: 640px) {
	.hitozukuri-head {
  background-size: 1900px;
		
}
}



@media (max-width: 640px) {
	.image-head {
  
  -webkit-mask-size: 1200px auto;
  mask-size: 1200px auto;
  -webkit-mask-position: 50% bottom;
  mask-position: 50% bottom;
  
}
}
#page-head .inner{
	margin:0 0 0 5rem;
	padding-bottom:clamp(0rem,8vw,1rem);
	position: relative;
}
#page-head .inner h1,
#page-head .inner .news-midashi{
	color:#fff;
	font-size: clamp(1.6rem, 3.5vw, 2.0rem);
	margin-bottom:clamp(0.2rem,3vw,0.75rem);
	line-height: 1.3;
	font-weight:400;
	letter-spacing: 0.1rem;
}
#page-head .inner .midashi-en{
	color:#fff;
	margin-left:0.15rem;
	font-weight: 500;
	font-size: clamp(0.80rem, 1.3vw, 1.0rem);
	line-height: 1;
}



#page-head .inner .pk-area{
	position:relative;
	top:-2rem;
}
#page-head .inner .pk-area,
#page-head .inner .pk-area a{
	font-size: clamp(0.75rem, 1.3vw, 0.9rem);
	color:#fff;
	font-weight:300;
}
#page-head .inner .pk-area ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
#page-head .inner .pk-area ul li{
}
#page-head .inner .pk-area ul li:not(:last-child)::after{
	content:'|';
	margin: 0 0.35rem;
}

@media (max-width: 1200px) {
	#page-head .inner{
	margin:0 0 0 4rem;
}
}
@media (max-width: 800px) {
	#page-head .inner{
	margin: 1.5rem 0 0 2.5rem;
}
}
@media (max-width: 480px) {
	#page-head .inner{
	margin: 1.5rem 0 0 1.25rem;
}
}

#page-contents{
	margin: 3rem auto 0;
}

.about-message .inner-box{
	display: flex;
	justify-content: space-between;
	margin-top: clamp(4rem,15vw,7rem);
}
.about-message .inner-box .title-area{
	width:50%;
}
.about-message .inner-box .txt-area{
	width:50%;
	margin-top:6.5rem;
}
.about-message .inner-box .txt-area p{
	margin:0 auto 1.5rem;
	line-height: 2.0;
}
.about-message .inner-box .txt-area .photo{
	margin:5rem auto 0;
	max-width:320px;
}
.about-message .inner-box .txt-area .photo img{
	width:100%;
	border-radius:10px;
}
.about-message .inner-box .txt-area .photo .name{
	text-align:center;
	margin:1rem auto 0;
	font-size:0.9rem;
}
.about-message .inner-box .txt-area .photo .name span{
margin-left:0.5rem;
	font-size:1.1rem;
}

.about-message .inner-box .title-area .box{
	position:sticky;
	top:10vh;
}
.about-message .inner-box .title-area h2{
font-size: clamp(1rem, 2.2vw, 1.2rem);
letter-spacing:0.1rem;
	font-weight:300;
}
.about-message .inner-box .title-area h2 span{
font-size: clamp(0.8rem, 1.5vw, 1.2rem);
	display:block;
	margin-top:0.5rem;
	color:#009b8b;

}

.about-message .inner-box .title-area h3{
	padding:2rem 0 12rem;
	font-size: clamp(1.7rem, 4.0vw, 2.5rem);
	line-height:1.8;
	letter-spacing:0.3rem;
}



@media (max-width: 800px) {
	.about-message .inner-box{
	display: block;
}
.about-message .inner-box .title-area{
	width:100%;
}
.about-message .inner-box .txt-area{
	width:100%;
	margin-top:0rem;
}
	.about-message .inner-box .txt-area p{
	line-height: 1.9;
		margin:0 auto 1.0rem;
}
	.about-message .inner-box .title-area .box{
	position:relative;
		top:0;
}
	.about-message .inner-box .title-area h3{
	padding:2rem 0 4rem;
	
}
}
.about-rinen{
	 margin-top:2rem;
	position:relative;
	overflow:hidden;
}
.about-rinen:before{
	content:'';
	background:#ffff;
	position:absolute;
	width:100%;
	height:5rem;
	top:0;
	border-radius:0 0 10vw 10vw;
	}
.about-rinen:after{
	content:'';
	background:#f7f7f7;
	position:absolute;
	width:100%;
	height:5rem;
	bottom:0;
	border-radius:10vw 10vw 0 0;
	}
.about-rinen .bg{
	 background: url(../image/about/rinen-bg.webp) no-repeat center;
  background-size: cover;
  height: 100%; 
  width: 100%;
  position: absolute;
  top: -70vh; 
  left: 0;
  z-index: -2;
  will-change: transform;
  transition: transform 0.1s linear;
}

.about-rinen .bg:before{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.5);
	z-index:-1;
}
.about-rinen .inner{
	color:#fff;
	margin: 40vh auto;
}
@media (max-width: 1200px) {
.about-rinen .bg{
	
  height: 120%; 
  width: 100%;
  top: -80vh; 
  
}
}@media (max-width: 800px) {
.about-rinen .bg{
	
  height: 120%; 
  width: 100%;
  top: -80vh; 
  
}
.about-rinen .inner{
	color:#fff;
	margin: 25vh auto;
}
}
@media (max-width: 600px) {
.about-rinen .bg{
	
  height: 130%; 
  width: 100%;
  top: -90vh; 
  
}
}
.about-rinen h2{
	text-align:center;
	letter-spacing:0.25rem;
	font-size:1.1rem;
	position:relative;
}
.about-rinen h2:before{
	content:'';
	width:1.5rem;
	height:1px;
	background:#fff;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-4.5em;
}
.about-rinen h2:after{
	content:'';
	width:1.5rem;
	height:1px;
	background:#fff;
	position:absolute;
	top:50%;
	right:50%;
	margin-right:-4em;
}
.about-rinen .title{
	text-align:center;
	font-size: clamp(1.3rem, 8vw, 1.9rem);
	letter-spacing:0.15rem;
	margin: 2rem 0;
	line-height:1.3;
}
.about-rinen .txt{
	font-size:0.95rem;
	margin: 2rem auto;
	line-height:2;
	max-width:300px;
}

@media (max-width: 600px) {
.about-rinen .txt{
	padding: 0 1rem;
}
	.about-rinen p span{
	display:inline;
		
}
}
.about-hoshin{
	background:#f7f7f7;
	padding: 1.5rem 0 8rem;
	position:relative;
	}

.about-hoshin h2{
	font-size: 2.0rem;
	letter-spacing:0.25rem;
	font-weight:300;
	margin-bottom:4rem;
}
.hoshin-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}
.hoshin-list li{
	width:48%;
	background:#fff;
	margin-bottom:4%;
	border-radius:10px;
	box-sizing:border-box;
	padding:2rem;
}
.hoshin-list li .nomber{
	font-size:2.5rem;
	color:#0068b4;
	margin:0.5rem 0;
	font-weight:300;
}
.hoshin-list li .image{
	display: flex;
	justify-content: center;
	align-items: center;
	height:8rem;
	margin:2rem auto;
}
.hoshin-list li .image img{
	width:auto;
	height:100%;
}
.hoshin-list li .title{
	color:#0068b3;
	font-weight:600;
	text-align:center;
	font-size: clamp(1.2rem, 2.4vw, 1.4rem);
	line-height:1.7;
	margin:1.5rem 0 2rem;
}
.hoshin-list li .title span{
	display:block;
}
.hoshin-list li .naiyo{
	
	font-size:0.95rem;
	line-height:1.7;
}
.hoshin-list li .naiyo span{
	font-weight:600;
	margin-bottom:0.25rem;
	font-size:1rem;
}
@media (max-width: 800px) {
	.hoshin-list{
	display: block;
	
}
.hoshin-list li{
	width:100%;
	padding:1rem 1.8rem 1.5rem;
}
	.hoshin-list li .title{
	
	font-size: clamp(0.5rem, 4.8vw, 1.4rem);
	
}
}

.marker-text {
  background-image: linear-gradient(to top, #ffff7a 60%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s ease-in-out;
  display: inline;
}
.marker-text.visible {
  background-size: 100% 100%;
}

.about-company h2{
	font-size:1.4rem;
	text-align:center;
	letter-spacing:0.5rem;
	padding:2rem 0 0;
}
.about-company .en{
	font-size:0.9rem;
	text-align:center;
	letter-spacing:0.5rem;
	margin:2rem 0 2.5rem;
	color:#0068b4;
}
.about-company h3{
	font-size:1.3rem;
	text-align:center;
	letter-spacing: 0.25rem;
	color:#0068b4;
}
.about-company .gaiyo-area{
	background:#fff;
	border-radius:10vw;
	margin:0 auto 5rem;
	box-sizing:border-box;
	padding: clamp(2rem, 10vw, 8rem);
}
@media (max-width: 700px) {
	.about-company .gaiyo-area{
	
	padding: clamp(1rem, 8vw, 8rem);
}
}
.company-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.company-info .row {
  display: grid;
  grid-template-columns: 6rem 1fr; /* ← ここで dt 幅を固定 */
  column-gap: 2rem;
  background-color: #f7f9fb;
  padding: 1rem;
  align-items: start;
  border-radius: 10px;
}

.company-info dt,
.company-info dd {
  margin: 0;
  padding: 0.5rem;
	font-size:0.95rem;
}
.company-info dt {
  color:#0068b4;
}
.company-info dd {
  border-left:0.5px solid #0068b4;
	padding-left:2rem;
}
.company-info li {
  list-style-type: none;
  position: relative;
  padding-left: 1em;
}

.company-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.3em;
  height: 0.3em;
  background-color: black;
  border-radius: 50%;
}
@media (max-width: 700px) {
  .company-info .row {
    grid-template-columns: 1fr; 
    padding: 1rem 1.0rem; 
  }

  .company-info dt {
    padding: 0.5rem 0 0 0;
    border-bottom: 0px;
  }

  .company-info dd {
    border-left: none; 
    padding:0.5rem 0 0.5rem 1rem;
  }
}

.group-box .group-inner{
	margin:3rem auto 0;
	padding-top:3rem;
	border-top:1px solid #aaa;
}
.group-box .group-inner .title-area{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.group-box .group-inner .title-area .logo{
	width:3.5rem;
}
.group-box .group-inner .title-area .title{
	font-size: 1.2rem;
	padding:0 0 0 1rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.group-box .group-inner .title-area .title h4{
	margin:0 0.5rem 0 0;
}
.group-box .group-inner .title-area .title .sub{
	display:inline-block;
	background:#dee7ee;
	font-size:0.9rem;
	line-height:1;
	padding:0.25rem 0.75rem 0.3rem;
	border-radius:5px;
}
.group-box .group-inner .info-area{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:1rem;
}
.group-box .group-inner .info-area .txt{
	font-size:0.95rem;
	width:40%;
}
.group-box .group-inner .info-area .txt img{
	width:60%;
	border-radius:8px;
	margin-top:clamp(1rem,5vw,1.5rem);
}
.group-box .group-inner .info-area .ggmap{
	width:55%;
	padding-bottom: 36.25%;
}
@media (max-width: 1200px) {
	.group-box .group-inner .info-area{
	display: block;
	margin-top:1rem;
}
.group-box .group-inner .info-area .txt{
	width:100%;
	margin:0 auto 1.5rem;
}
	.group-box .group-inner .info-area .txt img{
	width:100%;
	border-radius:0;
	margin-top:clamp(1rem,5vw,1.5rem);
}
.group-box .group-inner .info-area .ggmap{
	width:100%;
	padding-bottom: 70.25%;
}
}

@media (max-width: 800px) {
.group-box .group-inner{
	margin:1.5rem auto 0;
	padding-top:2rem;
}
.group-box .group-inner .title-area .title{
	display: block;
}
.group-box .group-inner .title-area .title h4{
	margin:0;
}
.group-box .group-inner .title-area .title .sub{
	margin-top:0.5rem;
}
}

.rec-menu ul{
	display: flex;
	justify-content: center;
	margin-top: clamp(3rem,15vw,6rem);
}
.rec-menu ul li{
	width:160px;
	text-align:center;
	font-size:0.9rem;
	background:#111;
	margin:0 0.25rem;
	border-radius:50px;
	transition: opacity 0.3s ease;
}
.rec-menu ul li:first-child{
	background:#009b8b;
}
.rec-menu ul li:nth-child(2){
	background:#0068b4;
}
.rec-menu ul li:hover{
	opacity:0.7;
	
}
.rec-menu ul li a{
	display:block;
	box-sizing:border-box;
	padding:0.5rem 0;
	color:#fff;
}

.recruit-area{
	margin-bottom:7rem;
}
.recruit-box{
border:1px solid;
	padding: clamp(2rem, 7vw, 7rem);
	border-radius:5vw;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin:2.5rem auto;
	}

.recruit-box .intro-area{
	width:40%;
	position:relative;
}
.recruit-box .intro-area .box{ 
	position:sticky;
	top:5rem;
}
.recruit-box .intro-area .photo{ 
	width:100%;
	border-radius:15px;
	overflow:hidden;
	margin:1rem auto 1.5rem; 
}
.recruit-box .intro-area .photo img{ 
	width:100%;
}
.recruit-box .yoko{
	width:50%;
}
.recruit-box h2{
	font-size:1.4rem;
	margin:0 0 1rem 0;
}
.recruit-box .box h2{
	font-size:1.4rem;
	margin:0 0 1rem 0;
}
.recruit-box .box p{
	font-size:0.9rem;
}
@media (max-width: 800px) {
	.recruit-box{
display:block;
	}
	.recruit-box .intro-area{
	width:100%;
	height:auto;
		margin:0 0 1rem;
}
	.recruit-box h2{
	text-align:center;
}
.recruit-box .intro-area .box{ 
	position:relative;
	top:0;
}
.recruit-box .yoko{
	width:100%;
}
	
}
.recruit-yoko {
	font-size:0.95rem;
	line-height:1.7;
}
.recruit-yoko dt{
	border-top:1px solid;
	padding:0.85rem 0 0.3rem;
}
.recruit-yoko .row:last-child{
	border-bottom:1px solid;
}
.recruit-yoko dd{
	
	padding:0rem 0 0.85rem 0.5rem;
}
.recruit-yoko li {
  list-style-type: none;
  position: relative;
  padding-left: 1em;
}

.recruit-yoko li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.3em;
  height: 0.3em;
  background-color: black;
  border-radius: 50%;
}
.recruit-box .rec-bt{
	margin:2rem auto 0;
		text-align:center;

}
.recruit-box .rec-bt a{
	display:inline-block;
	background:#111;
	padding:1rem 2.5rem;
	border-radius:50px;
	color:#fff;
	box-shadow: 0px 0px 0px 0px #cacaca;
 transition-duration: .3s;
}
.recruit-box .rec-bt a:hover{
	 transform: scale(1.05);
	box-shadow: 10px 10px 15px 0px #cacaca;
 transition-duration: .6s;
}
#recruit-shiage{
	border-color:#009b8b;
}
#recruit-shiage h2{
	color:#009b8b;
}
#recruit-shiage dt{
	border-color:#009b8b;
color:#009b8b;
}
#recruit-shiage .row:last-child{
	border-color:#009b8b;
}
#recruit-shiage .rec-bt a{
	background:#009b8b;
	
}

#recruit-printope{
	border-color:#0068b4;
}
#recruit-printope h2{
	color:#0068b4;
}
#recruit-printope dt{
	border-color:#0068b4;
color:#0068b4;
}
#recruit-printope .row:last-child{
	border-color:#0068b4;
}
#recruit-printope .rec-bt a{
	background:#0068b4;
	
}

.pv-area{
	margin:5rem auto;
	font-size:0.95rem;
}
.pv-area h2{
	font-size:1.5rem;
	margin:5rem 0 2rem;
	position:relative;
	padding-left:1.8rem;
}
.pv-area h2:before{
	content:'';
	width:1rem;
	height:1rem;
	background:#009b8c;
	position:absolute;
	border-radius:50%;
	left:0;
	top:50%;
	margin-top:-0.3rem;
	transform: skewY(-20deg);
}
.pv-area h3{
	font-size:1.1rem;
	margin:3rem 0 2rem;
	background:#efefef;
	padding:1rem 1.5rem;
	text-indent: -1.3rem; 
    padding-left: 2.5rem;
}
.pv-area ul {
  margin:1rem 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:1rem;
}
.pv-area li {
  list-style-type: none;
  position: relative;
  padding-left: 1em;
}

.pv-area li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.3em;
  height: 0.3em;
  background-color: black;
  border-radius: 50%;
}

.pv-table {
    display: grid;
    grid-template-columns: 10% 40% 50%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
    font-size: 0.9rem;
	line-height:1.6;
	margin:2rem 0;
}
.pv-table .header,
.pv-table .row {
    display: contents;
}
.pv-table div {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 1rem ;
}
.pv-table .header div {
    background-color: #f0f0f0;
    text-align: center;
}
.pv-table .cell-center {
    text-align: center;
	    padding: 1rem 0;

}
.pv-area .madoguchi{
	border:1px solid #ccc;
	padding:2rem 2rem;
}
.pv-area .madoguchi .title{
	font-weight:600;
	margin-bottom:0.5rem;
}

.contact-inner{display: flex;justify-content: flex-start;align-items: stretch;margin-top: clamp(5rem,15vw,7rem);}
.contact-inner .contact-menu{
	order: 2;
	font-size:0.9rem;
	margin-left:3rem;
	position:relative;
}
.contact-inner .contact-menu ul{
	position:sticky;
	top:5rem;
	padding-bottom:5rem;
	line-height:1.7;
	margin-top:1rem;
	
}

.contact-inner .contact-menu ul li a{
	margin-bottom:0.0rem;
	position:relative;
	padding:0.5rem 1.5rem 0.75rem 2.0rem;
	display:block;
	font-weight:300;
	color:#777;
}
.contact-inner .contact-menu ul li a:before {
	content: '';
	width: 0rem;
	height: 0rem;
	background: #0065b4;
	position: absolute;
	border-radius: 50%;
	left: 0;
	top: 50%;
	margin-top: -0.5rem;
	transform: skewY(-20deg);
	transition: width 0.3s ease, height 0.3s ease;
}
.contact-inner .contact-menu ul .active a:before{
content:'';
	width:1rem;
	height:1rem;
	
}
.contact-inner .contact-menu ul li a:hover,
.contact-inner .contact-menu ul .active a{
font-weight:500;
	color:#111;
}
.contact-inner .contact-menu ul .active a:before{
	
	background:#0068b1;
	
}
.contact-inner .contact-area{
	order: 1;
	width:calc(100% - 300px);
	max-width: 1600px;
}
.contact-inner .contact-box{
margin:0 auto 3rem;
	background:#fff;
	border-radius:0 6vw 6vw 0;
		padding: clamp(2rem, 5vw, 7rem);

}
.contact-inner .contact-box .contact-content{
padding-left:5vw;
	max-width:800px;
	margin:0 auto;
}
@media (max-width: 1300px) {
	.contact-inner .contact-box .contact-content{
padding-left:0;
	margin:auto;
}
}
@media (max-width: 900px) {
	.contact-inner{
display: block;
}
	.contact-inner .contact-area{
	width:90%;
		margin:0 auto;
}
.contact-inner .contact-menu{
	display:none;
}
	
.contact-inner .contact-box{
margin:0 auto 2rem;
	background:#fff;
	border-radius:10vw;
		padding: clamp(1rem, 8vw, 8rem);

}
}
.contact-inner .contact-box h2{font-size: 1.2rem;line-height:1.3;}
.contact-inner .contact-box .en-title{
font-size:0.9rem;
	margin-top:0.5rem;
	color:#0068b3;
	
}

.telfax-inner{
	margin-top:2rem;
}
.telfax-inner dl{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin:0.3rem 0;
	line-height:1.5;
}
.telfax-inner dt{
	color:#fff;
	margin-right:0.75rem;
	padding:0.3rem 1rem;
	
}
.telfax-inner .tel dt{
	background:#0068b3;
}
.telfax-inner .fax dt{
	background:#009b8b;
	color:#fff;
}
.telfax-inner dd{
	font-size:2.5rem;
	font-weight:300;
	letter-spacing:0.1rem;
		position:relative;
	top:-0.2rem;
}
.telfax-inner p{
	/* margin:1rem 0 0; */
}
@media (max-width: 900px) {
	.contact-inner .contact-box h2,
	.contact-inner .contact-box .en-title,
	.telfax-inner p{
		text-align:center;
	}
	.contact-inner .contact-box .en-title{
font-size:0.9rem;
	
	border-bottom:1px solid #ccc;
	padding-bottom:1.5rem;
}
	.telfax-inner dl{
	display: flex;
	justify-content: center;
	
}
.telfax-inner dt{
	font-size:clamp(0.95rem, 4vw, 1rem);
	padding:0.2rem 0.75rem;
}
.telfax-inner dd{
	font-size:clamp(1.6rem, 5vw, 2rem);
	
	top:-0.1rem;
}
.telfax-inner .subtxt{
			font-size:clamp(0.8rem, 3vw, 1rem);
	line-height:1.4
		margin-top:0.5rem;

	}
}
@media (max-width: 500px) {
	.contact-inner .contact-box h2 span{
		display:block;
		line-height:1.7;
	}
}

.contact-inner .cyui-box{
	border: 1px solid #ccc;
	padding:2rem;
	height:8rem;
	overflow-y:auto;
	font-size:0.95rem;
	/* border-radius:10px; */
	margin: 0rem auto 2rem;
	/* box-sizing: border-box; */
}
.contact-inner .cyui-box .title{
	font-weight:500;
	margin-bottom:0.5rem;
	text-align:center;
	
}
.contact-inner .cyui-box ol{
	border-top:1px solid;
	margin-top:1rem;
	padding-top:1rem;
}
.contact-inner .cyui-box ol li{
	list-style-type: decimal;
	padding:0.2rem 0;
	margin-left:1.5rem;
	line-height:1.7;
}
.formtext{
	margin:2rem 0 1.5rem;
}
.toi-form dt .akamoji{
	color:#cf2e2e;
	font-size:0.9rem;
}
.toi-form dt{
	/* width:99%; */
	background: #efefef;
	padding: 0.75rem 1rem;
	box-sizing:border-box;
}
.check-form dd,
.toi-form dd{
	padding:1rem 0 2rem;
	/* width:99%; */
	box-sizing:border-box;
}

.form-box dd textarea{
	width:100%;
	padding:15px 1em;
	background: #fff;
	border:1px solid #ccc;
	border-radius:2px;
	font-size:110%;
	box-sizing:border-box;
}
.form-box dd input{
	width:100%;
	padding:15px 1em;
	background: #fff;
	border:1px solid #ccc;
	border-radius:2px;
	font-size:110%;
	box-sizing:border-box;
}
.check-form dd input,
.form-box dd.radio-s input{
	width:unset;
}
.form-box dd.form-s input{
	width:90%;
}

.form-box dd.karada-s input{
	width: 39%;
	margin:0 2.5% 30px;
}

.form-box select {
  width:100%;
	padding:1.25rem 1rem;
	background: #dee7ee;
	font-size:1.0rem;
    border: 0;
    outline: 0;
-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.form-box dd textarea::placeholder,
.form-box dd input::placeholder {
  font-size: 0.92rem;
  opacity: 0.7;
}
.form-box dd .nengappi{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
.form-box dd .nengappi li{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	margin:0 0.5rem 0 0;
}
.form-box dd .nengappi select{
	padding:0.75rem;
}
.form-box dd .nengappi .txt{
	margin:0 0 0 0.4rem;
}

.form-box .radio-area span{
  text-align:center
	
}
.form-box .radio-area span.wpcf7-list-item {
}


@media only screen and (max-width: 500px) {
.form-box dd.form-s input{
	width:80%;
}
.form-box dd.time-s input,
.form-box dd.karada-s input{
	width: 80%;
	margin:0 0 30px;
}
	
}

.checkboxarea label{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.checkboxarea label input{
width:25px;
margin:0.2rem 0.7rem 0 0;
	
}


.checkbox-group .checkarea{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	line-height:1.6rem;
	font-size:1.1rem;
}

.checkbox-group .checkarea label{
	margin:0 1rem 0.1rem 0;
}
.checkbox-group .checkarea label input{
	padding:5px;
	
}





.formrest{
	margin:2rem auto 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}


.formrest input{
	display: block;
	text-align:center;
	margin:0 0.5rem 0 ;
 border:0;
   background: #0068b1;
 box-sizing:border-box;
 padding:1rem 2em 1rem 2rem;
 font-size:0.9rem;
	line-height:1.3rem;
 border-radius:50px;
	width:180px;
 box-shadow: 0px 0px 0px 0px #cacaca;
 transition-duration: .6s;
	color:#fff!important;
}



.formrest input:hover{
  transform: scale(1.1);
	box-shadow: 10px 10px 15px 0px #cacaca;
}
.service-content {
	margin-bottom:clamp(7rem, 12vw, 12rem);
}

.service-content .read{	
margin-top:clamp(3rem, 7vw, 8rem);
margin-bottom:clamp(4rem, 7vw, 10rem);
	padding-bottom:clamp(4rem, 6vw, 9rem);
	border-bottom:0.5px solid;
	margin-left:auto;
	margin-right:auto;
	width:95%;
}
.service-content .read p{	
margin-top:clamp(4rem, 6vw, 5rem);
	width:90%;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
}
.service-content .inner-box{	
display: flex;
	justify-content: space-between;
}
.service-content .inner-box .menu-area{margin:0;width: 22%;position:relative;left: 0.5rem;/* background: #ccc; */}
.service-content .inner-box .menu-area .menu-inner{position:sticky;top:5rem;display: flex;justify-content: center;padding-bottom: 15rem;}
.service-content .inner-box .menu-area .menu-inner ul{
font-size:0.9rem;
	font-weight:300;
	margin-top:2rem;
}
.service-content .inner-box .menu-area .menu-inner ul li a{
font-size:0.9rem;
	margin-bottom:1rem;
	position:relative;
	padding-left:1.5rem;
	color:#777;
	display:block;
	font-weight:300;
}
.service-content .inner-box .menu-area .menu-inner ul li a:hover,
.service-content .inner-box .menu-area .menu-inner ul .active a{
font-weight:500;
	color:#111;
}
.service-content .inner-box .menu-area .menu-inner ul li a:before{
content:'';
	width:0rem;
	height:0rem;
	background:#0065b4;
	position:absolute;
	border-radius:50%;
	left:0;
	top:50%;
	margin-top:-0.3rem;
	transform: skewY(-20deg);
	transition: width 0.3s ease, height 0.3s ease;
}
.service-content .inner-box .menu-area .menu-inner ul li a:before{
content:'';
	width:0rem;
	height:0rem;
	background:#0065b4;
	position:absolute;
	border-radius:50%;
	left:0;
	top:50%;
	margin-top:-0.3rem;
	transform: skewY(-20deg);
	transition: width 0.3s ease, height 0.3s ease;
}

.service-content .inner-box .menu-area .menu-inner ul li:nth-child(even) a:before {
  background: #009b8b;
}

.service-content .inner-box .menu-area .menu-inner ul .active a:before{
content:'';
	width:1rem;
	height:1rem;
	
}
.service-content .inner-box .service-area{
	width: 75%;
}
 
.service-box{
	margin-bottom:clamp(2.0rem, 8vw ,7.0rem);
}
.service-box .title-area{
	padding-left:clamp(2rem, 5vw ,5rem);
	margin-bottom:1rem;
}
.service-box .title-area .en-title{
	font-size: clamp(1.7rem,5vw , 2.8rem);
	font-weight:800;
	color:#0067b4;
	padding-top:1.5rem;
	line-height:1;
}
.service-box:nth-child(even) .en-title {
  color: #009b8b;
}

.service-box .title-area h2{
	font-size:clamp(0.95rem,2.5vw , 1.1rem);
	font-weight:300;
	margin-top:clamp(0.5rem, 2.5vw, 1.0rem);
	margin-bottom:clamp(1.5rem, 2.5vw, 2rem);
	/* letter-spacing:0.2rem; */
	line-height:1;
}
.service-box .info-box{
	padding:clamp(2rem, 5vw ,5rem);
	background: #f7f7f5;
	border-radius: 3vw 0 0 3vw;
}
.service-box .info-box .inner{max-width: 1100px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.service-box .info-box .inner .photo-area{
width:50%;
	order:2;
	
}
.service-box .info-box .inner .photo-area .swiper-slide{
	position: relative;
	aspect-ratio: 16 / 14;
	overflow:hidden;
	border-radius:clamp(0px, 0vw, 10px);
}
.service-box .info-box .inner .photo-area .swiper-slide img{
width:100%;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-box .info-box .inner .guide-box{width:50%;box-sizing:border-box;padding:0 3rem 0 0;order:1;font-size:0.95rem;line-height: 1.7;}

.service-box .info-box .inner .worklist h3{
	/* font-weight:500; */
	margin-top: clamp(2rem, 3vw, 2rem);
	margin-bottom:clamp(0.25rem, 3vw, 0.5rem);
	font-size: 0.85rem;
}
.service-box .info-box .inner .worklist ul{
display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.service-box .info-box .inner .worklist ul li{background:#fff;margin-right:0.5rem;margin-bottom: 0.35rem;line-height:1rem;padding:0.25rem 1rem 0.35rem;font-size: 0.8rem;border-radius:20px;/* color: #0066b4; */}
.service-box:nth-child(even) .info-box .inner .worklist ul li {
 /* color: #009b8b; */
 background:#fff;
}
.service-bt{
	margin:0 auto 0;
	margin-bottom:clamp(4rem,8vw,5rem);
		text-align:center;

}
.service-bt a{
	display:inline-block;
	background:#111;
	padding:0.8rem 4.5rem;
	border-radius:50px;
	color:#fff;
	font-size:0.95rem;
	box-shadow: 0px 0px 0px 0px #cacaca;
 transition-duration: .3s;
}
.service-bt a:hover{
	 transform: scale(1.05);
	box-shadow: 10px 10px 15px 0px #cacaca;
 transition-duration: .6s;
}
 @media (max-width: 1100px) {
	.service-box .info-box .inner .photo-area{
width:100%;
	order:1;
	
}
	.service-box .info-box .inner .guide-box{
width:100%;
	box-sizing:border-box;
	padding:0 ;
	order:1;
		margin-top:1.5rem;
}
	 .service-box .info-box .inner .photo-area .swiper-slide{
	 aspect-ratio: 16 / 10; 
	
}
}
@media (max-width: 850px) {
	 .service-content .inner-box{	
display: block;
}
	
.service-content .inner-box .menu-area{
width:100%;
	display:none;
}
.service-content .inner-box .menu-area .menu-inner{
position:relative;
	top:0;
	display:block;
	padding-bottom:5rem;
}
.service-content .inner-box .service-area{
	width: 100%;
	/* margin-left:4%; */
}
.service-box .info-box{
	padding:clamp(2rem, 10vw ,7rem);
	padding-top:clamp(2rem, 10vw ,7rem);
	border-radius: 0;
}
.service-box .title-area{
	padding-left:0;
	margin-bottom:1rem;
}
	.service-box .title-area .en-title{
		padding-top:0;

		text-align:center;
}

.service-box .title-area h2{
	
	margin-bottom:clamp(2.5rem, 8vw, 4rem);
text-align:center;
}
 }

.story-head{
	margin-top: clamp(2.0rem, 10vw ,7.0rem);
	margin-bottom:clamp(2.0rem, 8vw ,7.0rem);
	/* text-align:center; */
	padding: 0 10%;
}
.story-head img{
	width:80%;
	margin:0 auto;
	max-width:400px;
}
.story-head .logo-copy{
	margin-top: clamp(2.0rem, 8vw ,4.0rem);
	margin-bottom:clamp(4.0rem, 15vw ,9.0rem);
	/* width:80%; */
	max-width:400px;
	margin-left:auto;
	margin-right:auto;
}

.bg-image-wrapper {
  position: relative;
}
.bg-image-clip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  clip-path: inset(0); /* 切り抜き */
  z-index: -1;
}

.bg-image-fixed {
  position: fixed; /* 背景を固定 */
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.about-history .bg-image-fixed {
    background-image: url(../image/about/history-bg-pc.webp);
  }
@media (max-width: 1000px) {
.about-history .bg-image-fixed {
    background-image: url(../image/about/history-bg-sp.webp);
  }	
}
.about-history .bg-image-fixed:before{
    content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.72)
  }
.history-title{
  padding:45vh 0;
  height: 150vh;
  position: relative;
  box-sizing: border-box;
  /* margin-bottom: 5rem; */
}
.history-title .inner{
  position: sticky;
  top:45vh;
}
.history-title .inner p,
.history-title .inner h2{
  text-align: center;
  line-height: 1;
}
.history-title .inner h2{
  font-size:clamp(3.5rem, 12vw, 7rem);
  font-weight:500; 
  
}
.history-title .inner p{
  font-size:clamp(0.9rem, 3.0vw, 1.5rem);
  font-weight:500; 
  margin-top:clamp(0.7rem, 1vw, 1rem);
}
.history-title .inner {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.history-title .inner.visible {
  opacity: 1;
  transform: translateY(0);
}
.grad-txt {
 
background: linear-gradient(90deg,
  rgba(255, 110, 196, 1),
  rgb(104 219 146),
  rgb(242 199 28)
);  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 10s ease-in-out infinite;
  position: relative;
  z-index: 3; /* 背景のオーロラより前に */
}

@keyframes gradientText {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
.timeline-content{
  position: relative;
  /* margin:2rem auto; */
  overflow: hidden;
  padding-top:clamp(7rem,20vw,12rem);
  padding-bottom:clamp(7rem,20vw,12rem);
  /* z-index: -2; */
}

.timeline-title h3{
  text-align: center;
  font-size:1.2rem;
  writing-mode: vertical-rl;
  margin:0 auto;
  line-height: 1;
  border:1px solid;
    width:1.2rem;
  padding:1.5rem 1rem 1rem;
  letter-spacing: 0.5rem
}
.timeline-title .en-title{
  text-align: center;
  font-weight: 300;
  font-size:11vw;
  position: relative;
  z-index: -1;
  line-height: 1;
  margin:2rem 0;
	mix-blend-mode: overlay; 
  opacity: 0.6;
}
.timeline-title .txt{
  margin:0 auto;
 display: flex;
      justify-content: center;
      align-items: center;
  
}
.timeline-title .read{
  margin:0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 17rem;
}
.timeline-title .read h4{
  font-size: 1.5rem;
  line-height: 1.5;
  margin-left:1.5rem;
  font-weight: 600;
}
.timeline-title .read p{
  font-size:0.95rem;
   line-height: 2;
  
}

.timeline-box{
  margin-top:clamp(3rem,15vw,10rem);
  margin-bottom:clamp(3rem,15vw,10rem);
  margin-left:auto;
  margin-right:auto;
}
.timeline-box .box{
  padding-bottom:clamp(2rem,20vw,15rem);
  margin-left:auto;
  margin-right:auto;
  overflow: hidden;
}
.timeline-box .box-last{
  padding-bottom:0;
  margin-left:auto;
  margin-right:auto;
  overflow: hidden;
}
.timeline-box .inner{
  width:100%;
  max-width:900px;
  margin:0 auto;
  position: relative;
  display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.timeline-box .inner .year-box{
  width:200px;
    text-align:center;
  line-height: 1;
  position: relative;
}
.timeline-box .box .inner:after{
  content:'';
  position: absolute;
  width:1px;
  height:0;
  left:100px;
  margin-top:6.0rem;
  background: #111;
  transition: height 4.0s ease;
}
.timeline-box .box .active:after{
  height:calc(100% + 200%);
}
.timeline-box .box-last .active:after{
  height:0;
}
.timeline-box .inner .naiyo{
  width:calc(100% - 220px);
  padding:0.5rem 5% 0 0;
  box-sizing:border-box;
}
.timeline-box .inner .naiyo .photo-box{
  display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
  margin-top:clamp(1.5rem,5vw,2rem);
  font-size:0.88rem;
  line-height: 1.5;
}
.timeline-box .inner .naiyo .photo-2 .photo-inner{
  width:48%;
  margin-bottom:clamp(0.5rem,3vw,2rem);
}
.timeline-box .inner .naiyo .photo-box img{
  width:100%;
  border-radius: 5px;
  margin-bottom:clamp(0.3rem,0.7vw,0.75rem);
}
.timeline-box .inner .year-box .seireki{
  font-size:4rem;
  font-weight: 300;
}
.timeline-box .inner .year-box .wareki{
  font-size:0.95rem;
  font-weight: 400;
  margin-top:0.5rem;
}
@media (max-width: 600px) {
.timeline-box .inner .year-box .seireki{
  font-weight: 500;
}
  
  .timeline-box .box{
  padding-bottom:clamp(1rem,15vw,15rem);
 margin-bottom:0.25rem;
}
  .timeline-box .inner .year-box{
  width:105px;
}

.timeline-box .box .inner:after{
  
  left:52px;
  margin-top:3.5rem;
 
}

.timeline-box .inner .naiyo{
  width:calc(100% - 110px);
  padding:0 1.5rem 0 0;
}
.timeline-box .inner .year-box .seireki{
  font-size:1.7rem;
}
.timeline-box .inner .year-box .wareki{
  font-size:0.85rem;
}
  .timeline-title .read{
  margin:0 auto;
  writing-mode: horizontal-tb;
    text-orientation: initial;
    height: auto;
 
  
}

.timeline-title .read p{
  font-size:1rem;
   line-height: 1.75;
  margin:0.5rem 1.5rem;
  
}
}
@media (max-width: 500px) {
.timeline-box .inner .naiyo .photo-2 .photo-inner{
  width:100%;
  margin-bottom:clamp(0.5rem,3vw,2rem);
}
}
.history-bottom{
  position: relative;
}
.history-bottom .wh-guard{
  position: absolute;
  background-image: url(../image/history/wh-guard.png);
  background-size:500px auto;
  background-position: center top ;
  background-repeat: repeat-x;
  width:100%;
  height:100%;
}
.history-bottom .inner {
  position: relative;
  overflow: hidden;
}

.history-bottom .inner::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: url(../image/front/rekishislide2.webp); */
  background-size: cover;
  background-position: center bottom;
  transform: scale(1);
  transition: transform 10s ease;
  z-index: -1;
}

.history-bottom .inner.zoom::before {
  transform: scale(1.2);
}
.history-bottom .copy-area {
    padding: 15vh 0;
    position: relative;
    z-index: 1;
  }
.history-bottom .copy-area .moving-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    background-image: url(../image/history/120bg.webp); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.2; /* 初期の濃さ */
    animation: fadeInOut 5s ease-in-out infinite alternate;
}
@keyframes fadeInOut {
    0% {
        opacity: 0.2; /* 少し薄い */
    }
    50% {
        opacity: 0.8; /* 少し濃い */
    }
	100% {
        opacity: 0.8; /* 少し濃い */
    }
}
.history-bottom .copy-area p{
   text-align: center;
  }
.history-bottom .copy-area .copy-box {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.history-bottom .copy-area .copy-box.visible {
  opacity: 1;
  transform: translateY(0);
}


.history-bottom .copy-area .copy{
  font-size:1.5rem;
  letter-spacing: 0.5rem;
  line-height: 1.8;
  }
.history-bottom .copy-area .sub{
  font-size:0.9rem;
  letter-spacing: 0.25rem;
  line-height: 1;
  margin-top:2rem;
  }
.history-bottom .copy-area .genzai{
  font-size:0.95rem;
 text-align:left;
  line-height: 2;
  margin-top:2rem;
	max-width:650px;
	margin-left:auto;
	margin-right:auto;
	width:85%;
  }
@media (max-width: 800px) {
  .history-bottom .copy-area .copy span{
  display: block;
  }
 
}

.overlay-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay-popup.active {
  opacity: 1;
  visibility: visible;
}

.overlay-content {
  
  opacity: 0;
  visibility: hidden;
  z-index: -1;
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
	width: 90%;
  max-width: 900px;
	border-radius:10px;
	paddign:2rem;
   transition: opacity 0.3s ease-in-out, z-index 0s 1s; 
}
.ov-inner{
	max-height: calc(85vh - 4rem);
	height:100%;
	overflow-y: auto;
	border-radius: 10px;
	box-sizing: border-box;
	border:2rem solid rgba(255,255,255,0);
	margin: 0 auto;
	padding: 0 1.5rem;
	margin-top: clamp(0rem,1vw,1.5rem);
	margin-bottom:clamp(0rem,1vw,1.5rem);
}

.ov-inner .name-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ov-inner .name-area .photo{
	width:30%;
}

.ov-inner .name-area .photo img{
	width:100%;
}
.ov-inner .name-area .name-box{
	width:65%;
}
@media screen and (max-width:650px){
	.ov-inner .name-area{
	display: block;
}
.ov-inner .name-area .photo{
	width:100%;
	margin-bottom:clamp(0.5rem,5vw,1.2rem);
}


.ov-inner .name-area .name-box{
	width:100%;
}
	
}
.ov-inner .name-area .name-box .rekidai{
	color:#777;
}
.ov-inner .name-area .name-box .name{
	font-weight:500;
	font-size:clamp(1.2rem,5vw,1.7rem);
	letter-spacing:0.1rem;
	line-height:1;
	margin:0.5rem 0 1rem;
}
.ov-inner .name-area .name-box .sub{
	font-weight:400;
	font-size:0.9rem;
	line-height:1.5;
	margin:0.5rem 0 1rem;
}
.ov-inner .prof-area{
	line-height:1.7;
	border-top:0.5px solid #111;
	margin-top:clamp(1.5rem,5vw,2rem);
	padding-top:clamp(1.5rem,5vw,2rem);
}
.overlay-content.active {
  opacity: 1;
  visibility: visible;
	z-index:1000;
	 transition: opacity 0.3s ease-in-out, z-index 0s; 
}

.round_btn{
  display: block;
  position: fixed;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #0068b4;
  transition: all 1s;
  top:20px;
  right:20px;
  z-index: 2000;
  cursor: pointer;
}



.round_btn::before, .round_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 32px;
  background: #fff;
}


.round_btn::before{
  transform: translate(-50%,-50%) rotate(45deg);
}

.round_btn::after{
  transform: translate(-50%,-50%) rotate(-45deg);
}

.round_btn:hover{ 
    transform: rotate(360deg);
}
@media screen and (max-width:800px){
.ov-inner{
	padding: 0 1.0rem;
	border:4vw solid rgba(255,255,255,0);
	max-height: calc(80vh - 4rem);
}
	
	.round_btn {
  width: 40px;
  height: 40px;
		top:15px;
  right:15px;
}
 .round_btn::before, .round_btn::after {
  content: "";
   height: 20px;
}
	.overlay-content {
 margin-top: -1rem;
}

}



.about-index .menu ul{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: clamp(5rem,12vw,10rem);
	margin-bottom:clamp(5rem,15vw,8rem);
	margin-left:auto;
	margin-right:auto;
}
.about-index .menu ul li{
	width:48%;	
	margin-bottom:clamp(1.5rem,6vw,5rem);
}

.about-index .menu ul li .image-area{
	border-radius: 8px 50px 8px 30px;
		margin-bottom:clamp(0.25rem,3vw,1.0rem);
	overflow:hidden;
}
.about-index .menu ul li img{
	width:100%;
	transition: transform 0.5s ease;
}
.about-index .menu ul li a:hover img {
  transform: scale(1.05); 
	opacity:1;
}


.about-index .menu ul li .title span {
	font-size:1.1rem;
	font-weight:500;
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-size 0.4s ease;
}

.about-index .menu ul li a:hover .title span {
  background-size: 100% 2px;
	
}
.about-index .menu ul li .infotxt{
	font-size:0.85rem;
	line-height:1.3rem;
	color:#777;
	margin-top:0.25rem;
}

@media screen and (max-width:800px) {
	.about-index .menu ul{
	display: block;
}
.about-index .menu ul li{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
}
.history-popup{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor:pointer;
	margin-top:clamp(1rem,5vw,1.5rem);
}
.history-popup .popup-mark{
	width:35px;
	height:35px;
	/* border:1px solid #0067b4; */
	background:#fff;
	border-radius:50%;
	position:relative;
	text-align:center;
	margin-right:0.5rem;
	transition: background 0.3s ease;
}
.history-popup .popup-mark:before{
	content:'+';
line-height:40px;
	color:#fff;
	font-size:1.5rem;
	font-weight:200;
	top:-0.25rem;
	color:#111;
	position:relative;
	transition: color 0.3s ease; 
}
.history-popup .popup-txt{
	font-size:0.95rem;
}

.history-popup:hover .popup-mark {
    background: #111;
}

.history-popup:hover .popup-mark:before {
    color: #fff;
}
.timeline-gd{
	position:relative;
}
.timeline-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.timeline-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 3s ease-in-out;;
  opacity: 1;
}

.logo-motion {
  background: rgba(255, 255, 255, 0.2);
  mask-image: url('../image/common/logo-otonari-wh.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mix-blend-mode: overlay;

  width: 120vw;
  height: 100%;
  position: fixed;
  bottom: -200px;
  left: -500px;
  z-index: 0;

  opacity: 0;
  transform: translate(0, 0) scale(1);
  transition: opacity 1.5s ease;
  pointer-events: none;
}


@media screen and (max-width:800px) {
	.logo-motion {


  width: 90vw;
  height: 100%;
  position: fixed;
		left: -80vw;
 bottom: -30vh;
}
}
/* 背景ロゴアニメのレイヤー調整のため */
.about-zindex,.about-head,
.about-120{
	position:relative;
	z-index:1;
}

.rogo-animebox {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 456 / 360; 
	margin-top:(2rem,5vw,3rem);
	margin-bottom:(2rem,5vw,3rem);
	margin-left:auto;
	margin-right:auto;
}

.rogo-animebox img {
  width: 100%;
  height: auto;
  display: block;
}

.rogo-animebox .copy,
.rogo-animebox .txt-1,
.rogo-animebox .txt-2,
.rogo-animebox .txt-0,
.rogo-animebox .txt-th,
.rogo-animebox .txt-aniv {
  position: absolute;
}


.rogo-animebox .copy {
  width: 64.7%;   /* 295 / 456 */
  left: 0%;
}

.rogo-animebox .txt-1 {
  width: 18.6%;   /* 85 / 456 */
  top: 30.95%;     /* 110 / 360 */
  left: 0%;
}

.rogo-animebox .txt-2 {
  width: 25.1%;   /* 114.4 / 456 */
  top: 30.6%;
  left: 22.4%;    /* 102 / 456 */
}

.rogo-animebox .txt-0 {
  width: 38.6%;   /* 176 / 456 */
  top: 30.6%;
  left: 50.4%;    /* 230 / 456 */
}

.rogo-animebox .txt-th {
  width: 10.1%;   /* 46 / 456 */
  top: 69.4%;     /* 250 / 360 */
  left: 87.7%;    /* 400 / 456 */
}

.rogo-animebox .txt-aniv {
  width: 58.1%;   /* 265 / 456 */
  top: 84.7%;     /* 305 / 360 */
  left: 40.6%;    /* 185 / 456 */
}

@keyframes gentleFall {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.7);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }

}

.his-photo {
 
  opacity: 0;
  display: block;
}

.his-photo.visible {
  animation: gentleFall 2.0s cubic-bezier(0.33, 1, 0.68, 1) forwards;

}



.oginow-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  overflow: visible;
}
.oginow-intro .info-area{
  padding: 60vh 0rem 60vh 30rem;
  width: 70%;
  box-sizing: border-box;
  position:relative;
  z-index:2;
  margin-bottom: 65rem;
}
@media screen and (max-width:1800px) {
.oginow-intro .info-area{
  padding: 60vh 0rem 40vh 20rem;
  
  margin-bottom: 60rem;
}
}
@media screen and (max-width:1500px) {
.oginow-intro .info-area{
  padding: 60vh 2rem 0 10rem;
  width: 60%;
    margin-bottom: 60rem;

}
}
@media screen and (max-width:1300px) {
.oginow-intro .info-area{
  padding: 60vh 6rem 50vh;
  width: 100%;
	 margin-bottom: 0rem;
}

}
.oginow-intro .info-area .inner{
	/* max-width: 350px; */
}
.oginow-intro .info-area h2 {
  font-size: clamp(1.3rem,3.5vw,3rem);
  font-weight:600;
  margin-bottom:clamp(1.5rem,5vw,2.5rem);
  line-height:1.3;
}
.oginow-intro .info-area h2 span{
  display:block;
}
.oginow-intro .info-area p {
	margin-bottom:1.5rem;
	line-height:2;
	max-width: 550px;
	
}
@media screen and (max-width:900px) {
	.oginow-intro .info-area{
  padding: 0 1rem 0 2rem;
  padding-top: 80%;
  z-index:0;
}
	.oginow-intro .info-area h2 {
  text-align:center
}
	.oginow-intro .info-area h2 span{
  display:inline;
}
	.oginow-intro .info-area .txtbox {
  width:90%;
		max-width:400px;
		margin-left:auto;
		margin-right:auto;
}
}
.oginow-intro .photo-area {
  position: sticky;
  top: -5rem;
  width: 150%;
  z-index: 1;
  overflow:hidden;
  margin-left:-20%;
  padding: 0% 0 100%;
}

.oginow-intro .photo-area img {
  width: 50vw;
	max-width:500px;
	box-shadow:0 0 10px 0px rgba(0,0,0,0.1);
}

.oginow-intro .photo {
  position: absolute;
  top: 15%;
  left: 0;
  transform: translateX(200%) scale(1.2) rotate(-45deg);
  transition: all 6.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.oginow-intro .photo1.visible {
  animation-delay: 0.5s;
  top: 5%;
  left: 85%; 
  transform: translateX(0) scale(1) rotate(5deg); 
}

.oginow-intro .photo2.visible {
  animation-delay: 2.4s;
  top: 5%;
  left: 60%; 
  transform: translateX(0) scale(1) rotate(-12deg);
}

.oginow-intro .photo3.visible {
  animation-delay: 3.6s;
  top: 10%;
  left: 40%; 
  transform: translateX(0) scale(1) rotate(-30deg);
}

@media screen and (max-width:1300px) {
	.oginow-intro .photo-area {
  position: sticky;
  top: -8rem;
  width: 150%;
  z-index: 1;
  overflow:hidden;
  margin-left:-20%;
  padding: 60% 0 60%;
}
	.oginow-intro .photo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(200%) scale(1.2) rotate(-45deg);
  transition: all 3.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.oginow-intro .photo1.visible {
  animation-delay: 0.5s;
  top: 10%;
  left: 40%; 
  transform: translateX(0) scale(1) rotate(-10deg); 
}

.oginow-intro .photo2.visible {
  animation-delay: 2.4s;
  top: 18%;
  left: 40%; 
  transform: translateX(0) scale(1) rotate(-20deg);
}

.oginow-intro .photo3.visible {
  animation-delay: 3.6s;
  top: 28%;
  left: 40%; 
  transform: translateX(0) scale(1) rotate(-30deg);
}
}
@media screen and (max-width:900px) {
	.oginow-intro .photo-area {
  position: relative;
  top: 0;
  width: 100%;
  margin-left:-100%;
  padding: 120% 0 0;
}
.oginow-intro .photo {

  transform: translateX(200%) translateY(50%) scale(1.2) rotate(-45deg);
}
.oginow-intro .photo-area img {
  width: 40vw;
	
}	
	.oginow-intro .photo1.visible {
  top: 8%;
  left: -10%;
  transform: translateX(0) translateY(0%) scale(1) rotate(-10deg);
}

.oginow-intro .photo2.visible {
   top: 8%;
  left: 25%; 
  transform: translateX(0) translateY(0%) scale(1) rotate(-10deg);
}

.oginow-intro .photo3.visible {
   top: 8%;
  left: 60%; 
  transform: translateX(0) translateY(0%) scale(1) rotate(-10deg);
}

}
.head-sakura{
	position:relative;
	overflow:hidden;
}
.head-sakura .sakura {
	position:absolute;
    transition: transform 1.1s ease-out;
  }
.head-sakura .sakura4{
	width:20%;
	left:-7%;
	top:20%;
  }
.head-sakura .sakura5{
	width:25%;
	right:-5%;
	top:0%;
  }
.head-sakura .sakura img{
	width:100%;
	opacity:0.7
  }

.oginow-intro{
	position:relative;
}
.oginow-intro .sakura {
	position:absolute;
    transition: transform 1.1s ease-out;
	z-index:-1;
  }
.oginow-intro .inner .sakura img{
	width:100%;
	opacity:0.7
  }
.oginow-intro .inner .sakura1{
	width:80%;
	left:-20%;
	top:0;
	transition: transform 1.1s ease-out;
  }
.oginow-intro .inner .sakura2{
	width:30%;
	left:-5%;
	top:65%;
  }
.oginow-intro .inner .sakura3{
	width:60%;
	right:-10%;
	bottom:15vh;
	transition: transform 1.1s ease-out;
  }
@media screen and (max-width:900px) {
	.oginow-intro{
	overflow: hidden;
}
	.oginow-intro .inner .sakura1{
	width:40%;
	left:-20%;
	top:0;
	transition: transform 1.1s ease-out;
  }
.oginow-intro .inner .sakura2{
	width:30%;
	left:-5%;
	top:45%;
  }
.oginow-intro .inner .sakura3{
	width:50%;
	right:-30%;
	bottom:0;
	transition: transform 1.1s ease-out;
  }
}
.oginow-bar{
	 margin-top: -5rrem;
	 position:relative;
	 overflow:hidden;
}
.oginow-bar:before{
	content:'';
	background:#ffe9f6;
	position:absolute;
	width:100%;
	height:5rem;
	top:0;
	z-index:1;
	border-radius:0 0 10vw 10vw;
	}

.oginow-bar .bg{
	 background: url(../image/oginow/sakura-bg.webp) no-repeat center;
  background-size: cover;
  height: 200%; 
  width: 100%;
  position: absolute;
	background-position: calc(100% - 85%);

  top: -80vh; 
  left: 0;
  z-index: 0;
  will-change: transform;
  transition: transform 0.1s linear;
}

.oginow-bar .inner{
		margin: 40vh auto 30vh;
		position:relative;
}
.oginow-bar .inner h2{
		text-align:center;
		color:#fff;
		font-weight:500;
		letter-spacing:0.1rem;
		font-size: clamp(1rem,3vw,1.2rem);
}
.oginow-content .oginow-logo{
	width:70%;
	margin:0 auto;
	max-width:350px;
	margin-top:clamp(3rem,15vw,6rem);

}.oginow-content .read{
	width:90%;
	margin:0 auto;
	max-width:600px;
	margin-top:clamp(3rem,12vw,5rem);
	margin-bottom:clamp(2rem,5vw,5rem);

}
.oginow-content .read-block{
	
	background:#fff;
	border-radius:15px;
	box-sizing:border-box;
	padding:2rem;
	margin:1.5rem 0;
}
.oginow-content .read-block dl{
	display: flex;
	justify-content: center;
	align-items: center;
}
.oginow-content .read-block dl dt{
	width:8rem;
	text-align:center;
	letter-spacing:1rem;
	font-weight:500;
	font-size:1.1rem;
	text-indent:0.5rem;
}
.oginow-content .read-block dl dd{
	width:calc(100% - 8rem);
	padding:0 1.7rem;
	font-weight:300;
	line-height:2;
	box-sizing:border-box;
}
@media screen and (max-width:900px) {
	.oginow-content .read-block dl{
	display: block;
}
	.oginow-content .read-block dl dt{
	width:100%;
	text-indent:0;
}
.oginow-content .read-block dl dd{
	width:100%;
	padding:1rem 0 0 ;
	line-height:1.6;
}
}
.oginow-bt{
	
	text-align:center;
	
	
}
.oginow-bt a{
	display:inline-block;
	background:#fff;
	border-radius:50px;
	text-align:center;
	width:280px;
	margin:1rem auto 0;
	font-size:0.95rem;
	padding:1rem 0;
	font-weight:500;
	position:relative;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.0)
}
.oginow-bt a:after{
	content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.7em;
  margin-left: 0.5em;
  background-image: url('../image/common/gaibulink.svg'); 
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.7;
	top:-0.1rem;
	position:relative;
}
.oginow-bt a:hover{
	padding:1rem 0.5rem;
	box-shadow:15px 15px 10px 0 rgba(0,0,0,0.1);
}
.oginow-content .content-guide{
	width:85%;
	max-width: 900px;
	background:#fff;
	border-radius:15px;
	box-sizing:border-box;
	padding:2rem;
	margin:1.5rem auto;
	margin-top:-45vw;
	position: relative;
	z-index: 2;
}
@media screen and (max-width:1800px) {
.oginow-content .content-guide{

	margin-top:-35vw;
}
}
@media screen and (max-width:1500px) {
	.oginow-content .content-guide{
	margin-top:-30%;
}
}
@media screen and (max-width:1300px) {
	.oginow-content .content-guide{
	margin-top:-5%;
}
}
@media screen and (max-width:900px) {
	.oginow-content .content-guide{
	margin-top:-10%;
}
}

.oginow-content .guide-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	border-bottom:1px dotted #aaa;
	padding:1.5rem 0;
}
.oginow-content .guide-box:last-child{
	
	border-bottom:0px dotted #aaa;
	padding-bottom:0;
}
.oginow-content .guide-box:first-child{
	
	padding-top:0;
}
.oginow-content .guide-box .guide-info{
	width:60%;
	box-sizing:border-box;
	padding-right:1rem;
}

.oginow-content .guide-box .image{
	width:40%;
}
.oginow-content .content-guide h3{
	font-size:clamp(1.1rem,3vw,1.3rem);
	line-height:1.5;
	padding:0.5rem 0 1rem;
	color:#f384b7;
}
.oginow-content .content-guide p{
	font-size:0.9rem;
	line-height:1.7;
}
.oginow-content .content-guide img{
	width:100%;
}
@media screen and (max-width:900px) {

	.oginow-content .guide-box .guide-info{
	width:100%;
	padding-right:0;
		order: 2;
}

.oginow-content .guide-box .image{
	width:100%;
	order: 1;
}
	.oginow-content .content-guide h3{
	padding:1.5rem 0 1rem;
}
	.oginow-content .content-guide{
	margin-top:2rem;
}
}



#cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.9);
    padding: 1.5rem 0.5rem 0.75rem;
    font-size: 0.85rem;
	line-height:1.6;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.5);
    z-index: 9999;
    word-wrap: break-word;
  }
  #cookie-banner .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem 0.25rem;
		display: flex;
	justify-content: center;
  }
#cookie-banner .inner .txt-area{
    padding-right:1.5rem;
  }
#cookie-banner .inner .bt-area{
	display: flex;
	justify-content: center;
  }

  #cookie-banner button {
    margin-right: 0.75rem;
    padding: 1rem 0;
    min-width: 150px;
    margin-bottom: 0.5rem;
	  background:#333;
	  border:0;
	  border-radius:5px;
	  box-sizing:border-box;
	  color:#fff;
		cursor: pointer;
		font-size:0.90rem;
  }
 #cookie-banner button:hover{
    opacity: 0.7;
  }
 #cookie-banner button.doui{
    background: #0068b1;
  }

@media screen and (max-width: 800px) {
	#cookie-banner {
   
    padding: 0rem 0.3rem 0.5rem;
   
  }
	
	#cookie-banner .inner {
    		display: block;
  }
	#cookie-banner .inner .txt-area{
    padding-right:0;
		margin-bottom:1rem
  }
}
		@media screen and (max-width: 480px) {
    #cookie-banner button {
      display: block;
      width: 100%;
      margin-right: 0;
    }
		 #cookie-banner button {
    margin-right: 0;
    min-width: auto;
    width:50%;
  }	
  }


.news-page .news-content{
	background:#fff;
	border-radius:10vw;
	margin-left:auto;
	margin-right:auto;
	margin-top:clamp(3rem,10vw,8rem);
	box-sizing:border-box;
	padding: clamp(2rem, 10vw, 8rem);
}
.news-page .news-content p{
	line-height:1.7;
	margin-bottom:0.85rem;
}
.news-page .news-content h1{
	font-size:clamp(1.1rem,4vw,1.6rem);
	font-weight:500;
	line-height:1.5;
	
}
.news-page .news-content .singledate{
	font-size:0.9rem;
	font-weight:400;
	border-bottom:1px solid ;
	border-top:1px solid ;
    padding-top:clamp(0.25rem,2vw,1rem);
	 padding-bottom:clamp(0.25rem,2vw,1rem);
	margin-top:clamp(0.25rem,2vw,1rem);
	 margin-bottom:clamp(0.25rem,2vw,1rem);
	line-height:1;
	text-align:right;
}
.news-page .page-linkbox{
	margin-top:clamp(0.55rem,3vw,2rem);
	margin-bottom:clamp(2rem,5vw,4rem);
	font-size:0.85rem;
}
.news-page .page-linkbox ul{
	display: flex;
	justify-content: space-between;
	margin:0 1rem;
}
.news-content .wp-block-image img{
margin-top:clamp(0.5rem,3vw,1rem);	
}
@media (max-width: 700px) {
.news-page .news-content{
	padding: clamp(1rem, 6vw, 5rem);
	border-radius:15px;
}
}

 .archive-content{

	margin-top:clamp(3rem,10vw,8rem);
	 margin-bottom:clamp(3rem,10vw,8rem);
	box-sizing:border-box;
}
 .archive-content h2{
font-size:clamp(1.2rem,4vw,1.3rem);
	 margin-bottom:clamp(1.2rem,4vw,2rem);
}

.page-nav {
 display:block!important;
 margin: 0 auto 50px;
 padding-top:40px;
 font-size:0.9rem;
 text-align: center;
 clear: both;
	margin:0 0 7rem;
}

.page-nav li {
	display: inline;
	list-style: none outside none;
	margin:0 2px!important;
}
.page-nav li a {
	border: 1px solid rgb(230,230,230);
	color: #444!important;
	text-decoration: none;
	border-radius: 3px;
	background: #fff;	margin:3px 0;

}
.page-nav li a:hover{
		background-color:#0067b4;
		color:#fff!important;
		-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
	
	}

.page-nav li a:hover {
	border: 1px solid #0067b4;
}
.page-nav li a:active {
	box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
	top:1px;
}

.page-nav li.current span {
	background-color: #444;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px inset;
	color:#fff;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	border-radius: 3px;
	margin:3px 0;
}
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span {
	background: #fff;
	border: 1px solid rgb(230,230,230);
	color: #999;
	text-decoration: none;
	border-radius: 3px;margin:3px 0;
}

.page-nav li.page_nums span {
	background: rgb(102,102,102);
	border: 1px solid rgb(51,51,51);
	color: rgb(255,255,255);
}
.page-nav li a,
.page-nav li.current span,
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span,
.page-nav li.page_nums span {
	padding: 0.25em 0.8em;
	display: inline-block;
	position:relative;
}

 .bace-inner{

	margin-top:clamp(3rem,10vw,8rem);
	 margin-bottom:clamp(3rem,10vw,8rem);
	box-sizing:border-box;
}
 .bace-inner h2{
font-size:clamp(1.2rem,4vw,1.3rem);
	 margin-bottom:clamp(1.2rem,4vw,2rem);
}
.works-menu .read{
	margin-top:clamp(4rem,7vw,6rem);
	padding-bottom:2rem;
	font-size:0.85rem;
	line-height:1.8;
	border-bottom:0.5px solid;
}
.works-menu ul{
  display: flex;
	justify-content: center;
	align-items: center;
	margin-top:clamp(4rem,8vw,7rem);
	margin-bottom:clamp(2.7rem,6vw,3.5rem);
}
.works-menu .worksmenu-txt li.current{
  position: relative;
}
.works-menu .worksmenu-txt li.current:after{
  position: absolute;
	content:'';
	width:10px;
	height:9px;
	background:#111;
	border-radius:50%;
	left:50%;
	margin-left:-4.5px;
	bottom:-10px;
	transform: skewY(-20deg);
}
.works-menu ul li .flip {
  position: relative;
  display: block;
  height: 40px; 
  transform-style: preserve-3d;
}
.works-menu ul li.txt-3s .flip {
  width: 55px;
 
}
.works-menu ul li.txt-3 .flip {
  width: 85px;
 
}
.works-menu ul li.txt-6 .flip {
  width:115px;
 
}
.works-menu ul li.txt-8 .flip {
  width:140px;
 
}

.works-menu ul li .flip span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  transition: transform 0.6s ease;

}

.works-menu ul li .front {
  transform: rotateX(0deg) translateZ(10px);
  z-index: 2;
	font-size:0.95rem;
	letter-spacing:0.05rem;
	font-weight:600;
}

.works-menu ul li .back {
  transform: rotateX(-90deg) translateZ(10px);
	font-size:0.85rem;
	font-weight:500;
}

.works-menu ul li:hover .front {
  transform: rotateX(90deg) translateZ(10px);
}

.works-menu ul li:hover .back {
  transform: rotateX(0deg) translateZ(10px);
}

@media (max-width: 500px) {
.works-menu ul li.txt-3s .flip {
  width: 50px;
 
}
.works-menu ul li.txt-3 .flip {
  width: 75px;
 
}
.works-menu ul li.txt-6 .flip {
  width:100px;
 
}
.works-menu ul li.txt-8 .flip {
  width:130px;
 
}

.works-menu ul li .front {
 
	font-size:0.95rem;
	
}

.works-menu ul li .back {
	font-size:0.85rem;
}
	.works-menu ul li.current:after {
  
	width:10px;
	height:9px;
	background:#111;
	border-radius:50%;
	left:50%;
	margin-left:-4.5px;
	bottom:-5px;
}
}
@media (max-width: 460px) {
	.works-menu ul{
 flex-wrap: wrap;
}
	
	.works-menu ul li.txt-3s .flip,
	.works-menu ul li.txt-3 .flip,
	.works-menu ul li.txt-6 .flip,
	.works-menu ul li.txt-8 .flip{
  width: 140px;
 margin-top:1.2rem;
}
.works-menu ul li .front {
 
	font-size:0.9rem;
	
}

.works-menu ul li .back {
	font-size:0.8rem;
}

}

@media (max-width: 350px) {
.works-menu ul{
 display:block;

}
	.works-menu ul li.txt-3s .flip,
	.works-menu ul li.txt-3 .flip,
	.works-menu ul li.txt-6 .flip,
	.works-menu ul li.txt-8 .flip{
  width: 140px;
 margin-top:0;
		margin-left:auto;
	margin-right:auto;
}


	.works-menu ul li.current:after {
  
	width:10px;
	height:9px;
	background:#111;
	border-radius:50%;
	left:0%;
		top:1rem;
	margin-left:0;
	bottom:50%;
		margin-bottom:-5px;
}
.works-menu ul .txt-3s.current::after{
  margin-left:-2.5rem;

}
.works-menu ul .txt-3.current::after{
  margin-left:-3rem;

}
	.works-menu ul .txt-6.current::after{
  margin-left:-5rem;

}
.works-menu ul .txt-8.current::after{
  margin-left:-5rem;

}
}
.works-content .works-menu ul{
  display: block;

}


.works-content .works-menu ul li .flip span {
 
  display: block;

}


.works-box .works-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	width:103%;
	margin-left:-1.5%;
}
.works-box .works-list li{
	width:22%;
	margin-left:1.5%;
	margin-right:1.5%;
	margin-bottom:clamp(2rem,5vw,3rem);
}
.works-box .works-list li .image{
	 width:100%;
	 overflow:hidden;
	 box-sizing:border-box;
	 margin-bottom:clamp(0.5rem,3vw,1.25rem);
	 position: relative;
	 aspect-ratio: 1 / 1; 
	overflow: hidden;
}
.works-box .works-list li .image img{
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	/* object-fit: contain; */ /* 見切れない */
	object-fit: cover;
	transform: translate(-50%, -50%);
}
.works-box .works-list li .image img{
	width:100%;
	transition: transform 0.5s ease;
}
.works-box .works-list li .image:hover img {
	opacity:1;
}


.works-box .works-list li .image:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1.5px solid #f9fafa;
    border-left: 1.5px solid #f9fafa;
    box-sizing: border-box;
    transition:all 0.8s ease;
	-webkit-transition:all 0.8s ease;
	z-index:1
}
.works-box .works-list li a:hover .image:before {
    width: 100%;
    height: 100%;
 border-top: 1.5px solid #111;
    border-left: 1.5px solid #111;
   
}
.works-box .works-list li .image:after {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
   bottom: 0;
   right: 0;
    border-bottom: 1.5px solid #f9fafa;
    border-right: 1.5px solid #f9fafa;
    box-sizing: border-box;
    transition:all 0.8s ease;
	-webkit-transition:all 0.8s ease;
	z-index:1
}
.works-box .works-list li a:hover .image:after {
    width: 100%;
    height: 100%;
 border-bottom: 1.5px solid #111;
    border-right: 1.5px solid #111;
   
}

.works-box .works-list li .title {
    font-size:1.05rem;
	font-weight:500;
	line-height:1.6;
    margin-bottom:clamp(0.5rem,1vw,0.75rem);
}
.works-box .works-list li .tag-area,
.works-content  .tag-area{
    font-size:0.8rem;
	line-height:1.6;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
   
}
.works-box .works-list li .tag-area span,
.works-content .tag-area span {
  margin:0 0 0.2rem 0;
	padding-right:0.25rem;
  display:inline-block;
	line-height:1.5;
	color:#555;
}
.works-box .works-list li .tag-area span:after,
.works-content .tag-area span:after{
  content:'/';
  margin: 0 0.2rem;
}
.works-box .works-list li .tag-area span:last-child:after,
.works-content .tag-area span:last-child:after{
  content:'';
	margin:0;
   
}

@media (max-width: 1200px) {
	.works-box .works-list li .image img{

	width: 110%;
	height: 110%;
	
}
	.works-box .works-list{
	width:104%;
	margin-left:-2%;
}
	.works-box .works-list li{
	width:29.3%;
	margin-left:2.0%;
	margin-right:2.0%;
}
	.works-box .works-list li .image{
	 aspect-ratio: 16 / 14; 
}
}
@media (max-width: 800px) {
	.works-box .works-list li .image img{

	width: 110%;
	height: 110%;
	
}
	.works-box .works-list li{
	width:46%;
	margin-left:2.0%;
	margin-right:2.0%;
}
	.works-box .works-list li .image{
	 aspect-ratio: 16 / 10; 
}
}
@media (max-width: 500px) {
	.works-box .works-list{
	width:100%;
	margin-left:0%;
}
	.works-box .works-list li .image img{

	width: 105%;
	height: 105%;
	
}
	.works-box .works-list li{
	width:100%;
	margin-left:2.0%;
	margin-right:2.0%;
}
	.works-box .works-list li .image{
	 aspect-ratio: 16 / 9; 
}
}

.works-content{
	margin-top:clamp(4rem,8vw,5rem);
}

.works-content .works-inner .title-area{
	margin-bottom:clamp(1rem,4vw,2rem);
}
.works-content .works-inner .title-area h1{
	font-size:clamp(1.1rem,5vw,1.3rem);
	font-weight:500;
	line-height:1.6;
    margin-bottom:clamp(0.5rem,1vw,0.75rem);
}
.works-content{
	display: flex;
	justify-content: space-between;
	position:relative;
	margin-bottom:clamp(3rem,8vw,5rem);
}
.works-content .works-inner{
	width:calc(100% - 200px);
}
.works-content .works-menu-area{
	width:200px;
	padding-left:60px;
	box-sizing:border-box;
}

.works-content .works-menu-area{
	position:sticky;
	top:5rem;
	height: 350px;
	z-index:1;
	margin-top:0.75rem;
}

.works-content .works-menu-area ul li .front {
	font-size:0.85rem;
	font-weight:600;
}

.works-content .works-menu-area ul li .back {
	font-size:0.75rem;
}

@media (max-width: 1000px) {
	.works-content{
	display:block;
}
.works-content .works-inner{
	width:100%;
}
.works-content .works-menu-area{
	width:100%;
	padding-left:0px;
	box-sizing:border-box;
}

.works-content .works-menu-area ul{
	
	position:relative;
	top:0rem;
	height:auto;
}
	.works-content .works-menu-area ul li{
	border-bottom:0.5px solid;
	position:relative;
	top:0rem;
	height:auto;
	padding: 0.75rem 0 0.0rem;
}
}



.works-content .works-info{
	margin-top:clamp(2rem,5vw,5rem);
	border:0.5px solid;
	padding:clamp(1.5rem,4vw,2rem);
	position:relative;
}
.works-content .works-info h2{
	margin-bottom:clamp(0.75rem,2vw,1rem);
	font-weight:500;
}
.works-content .works-info dl{
	margin-bottom:0.5rem;
	font-size:0.9rem;
	line-height:1.7;
	display: flex;
	justify-content: flex-start;
}
.works-content .works-info dl dt{
	position:relative;
}
.works-content .works-info dl dt:after{
	content:'|';
	margin:0 0.5rem;
}

@media (max-width: 600px) {

	.works-content .works-info dl{

	display: block;
}
	.works-content .works-info dl dt:after{
	content:'';
	margin:0;
}
	.works-content .works-info dl dt:before{
	content:'■';
	margin:0 0.25rem;
		font-size:0.5rem;
		position:relative;
		top:-0.1rem;
		
}
		.works-content .works-info dt{
			line-height:1.4;
}
	.works-content .works-info dd{
		padding-left:1rem;
}
}
.works-content .show.works-info:before{
	content:'';
	position:absolute;
	width:0.5px;
	height:0%;
	background:#111;
	top:0.5rem;
	right:-0.5rem;
	animation: worksbox-right ease-in-out 2s forwards; 
}
@keyframes worksbox-right {
 0% {
    height:0%;
  }
   100% {
   height:100%;
  }
}
.works-content .show.works-info:after{
	content:'';
	position:absolute;
	width:0%;
	height:0.5px;
	background:#111;
	bottom:-0.5rem;
	right:-0.5rem;
	 animation: worksbox-bottom ease-in-out 2s forwards; 
}
@keyframes worksbox-bottom {
 0% {
    width: 0;
  }
   100% {
    width: 100%;
  }
}

.works-content .inner .cat-area dd,
.works-content .inner .tag-area dd{
	position:relative;
}

.works-content .inner .cat-area dd a:after,
.works-content .inner .tag-area dd a:after{
	position:relative;
	content:'/';
	margin:0 0.25rem;
}
.works-content .inner .cat-area dd a:last-child:after,
.works-content .inner .tag-area dd a:last-child:after{
	content:'';
	margin:0 ;
}

@media (max-width: 600px) {
	.works-content .inner .cat-area dd a,
.works-content .inner .tag-area dd a{
	display:block;
	position:relative;
	padding-left:1rem;
}

.works-content .inner .cat-area dd a:after,
.works-content .inner .tag-area dd a:after{
	position:relative;
	content:'';
	margin:0;
}
.works-content .inner .cat-area dd a:before,
.works-content .inner .tag-area dd a:before{
	content:'';
	width:5px;
	height:5px;
	background:#111;
	position:absolute;
	border-radius:50%;
	top:0.65rem;
	left:0.25rem;
}
}
.works-content figure{
	margin-bottom:2rem;
	
}

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.works-page .tag-title{
	margin-bottom:clamp(2.5rem,3vw,3rem);
	font-size:1.3rem;
}

.tag-menuarea {
  width: 100%;
  margin-bottom:clamp(3rem,8vw,6rem);
  margin-left:auto;
  margin-right:auto;
  text-align:center
}

.tag-box {
  width: 180px;
  max-height: 2.5rem; 
  border: 0.5px solid #111;
  border-radius: 50px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 auto;
  
}

.tag-box.open {
  width: 100%;
  max-height: 1200px; 
	border-radius: 10px;
transition: width 1.0s ease, max-height 1.5s cubic-bezier(0.75, 0.11, 0.35, 0.89) 1.0s, border-radius 1.2s ease 0.0s;
}

.tag-box.closing {
transition: max-height 1.0s cubic-bezier(0.24, -0.05, 0, 1.00) 0.0s, width 1.7s cubic-bezier(0.65, 0.05, 0, 1.02) 0s,  border-radius 1.2s ease-in-out 0s;

}




.tag-header {
  font-size: 0.85rem;
  line-height: 2.5rem;
  user-select: none;
}

.tags {
  opacity: 0;
  padding: 0 20px 10px 20px;
  transition: opacity 0.3s ease;
  user-select: none;
}

.tag-box.open .tags {
  opacity: 1;
}
.works-taglist span a{
	display:inline-block;
	background:#efefef;
	font-size:0.88rem;
	padding:0.2rem 1rem;
	margin:0 0.25rem 0.3rem 0;
}
.works-taglist span a:hover{
	
	background:#ccc;
	
}
.megamenu {
  overflow-y: auto;
  display: flex;
  justify-content: center;
	align-items: stretch;
  position: fixed;
  background: #efefef;
  width: 100%;
  z-index: -10;
  top: 0;
  left: 0;
  inset: 0; 
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, z-index 0s linear 0.4s;
}


/* 表示状態 */
.megamenu.active {
  opacity: 1;
  z-index: 100;
  pointer-events: auto;
  transition: opacity 0.4s ease, z-index 0s;
}
.megamenu .menu-area{
	width: 100%;
	margin: 3rem auto 3rem;
	padding: 0 6%;
	box-sizing:border-box;
	min-height: 100vh;
	z-index: 1;
	padding-right: 55%;
}
.megamenu .megamenu-baner{
	width:100%;
	display:block;
	border-radius:10px;
	box-sizing:border-box;
	margin: 1rem 0 1.5rem;
}
.megamenu .megamenu-baner img{
	width:100%;
	border-radius:10px;

}
.megamenu .menu-area .title{
	font-size:1.2rem;
	font-weight:500;
	margin: 2rem 0;
}
.megamenu .menu-area ul li .ic{
	width:clamp(3rem,5.0vw,4.0rem);
	height:clamp(3rem,5.0vw,4.0rem);
	overflow:hidden;
	background:#ccc;
	border-radius:50%;
	margin-right:1rem;
}
.megamenu .menu-area ul li .txt{
	font-weight:500;
	font-size:0.90rem;
}
.megamenu .menu-area ul li .ic img{
	width:100%;
}
.megamenu .menu-area ul li a{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background:#fff;
	padding:0.6rem 0.7rem;
	box-sizing:border-box;
	margin:0 auto 0.75rem;
	border-radius:0.5rem
}
.megamenu .menu-area ul li a:hover{
	background:#ddd;
	
}

.megamenu .submenu ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
  padding-left: 4.0rem;
}
.megamenu .submenu ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
  padding-left: 2.30rem;
}

.megamenu .submenu.open ul {
  max-height: 500px; 
}
.megamenu .submenu.open ul li a{
 padding:clamp(0.3rem,4vw,0.7rem);
	padding-left:1.2rem;
		font-size:0.92rem;

}

.megamenu .submenu > a {
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
}

.megamenu .submenu > a::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  font-size: 1.5rem;
  color: #333;
  transition: transform 0.3s ease;
}

.megamenu .submenu.open > a::after {
  content: '−'; 
}
 .megamenu-bg{
	 width:50%;
	 height:100vh;
	 background-image: url('../image/common/menu-imgbg.webp');
	 background-size:cover;
	 background-position: center;
	 position: fixed;
	 left: 50%;
	} 

@media (max-width: 700px) {
	.megamenu{
	display:block;
}
	.megamenu-bg{
	display:none;
 } 
	.megamenu .menu-area{
	width:90%;
	padding:0;
}
}


header  .txtmenu {
	margin:1.5rem 0!important;
}
header  .txtmenu li a{
	position:relative;
	margin: 0  0 0 0.5rem!important;
	padding:0.3rem 0.3rem!important;
	padding-left:1.2rem!important;
	background:none!important;
	font-size:0.95rem;
}

header  .txtmenu li a:before{
	content:'>';
	margin-right:0.25rem;
	position:absolute;
	left:0;
	transition: 0.3s ease-in-out;
}
header .txtmenu li a:hover:before{
	left:0.25rem;
}

header .snsmenu{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	padding-bottom: 5rem;
}
header .snsmenu li a{
	width:40px;
	height:40px;
	background:#fff;
	display: flex;
	justify-content: center!important;
	align-items: center!important;
	margin:0rem 0 0 0.45rem!important;
	border-radius:50%!important;
	padding:0!important;
	text-align:center!important;
}
header .snsmenu li:first-child img{
	width:10px;
}
header .snsmenu li:nth-child(2) img{
	width: 20px;
}
header .snsmenu li a:hover{
	opacity:1;
	background:#009d8b!important;
}

.about-othercontent{
	background:#fff;
}

.about-othercontent{
	background:#fff;
	padding-top:clamp(3.5rem,8vw,5rem);
	padding-bottom:clamp(3.5rem,8vw,5rem);
}

.about-othercontent .inner{
	display: flex;
	justify-content: flex-start;
}
.about-othercontent .inner .title{
	font-size:1.7rem;
	font-weight:500;
}
.about-othercontent .inner .title span{
display:block;
	font-size:0.95rem;
		margin-bottom:0.35rem;
font-weight:400
}
.about-othercontent .title-area{
	width:22rem;
}
.about-othercontent .about-menu-box{
	width:calc(100% - 22rem);
}
.about-othercontent .menu ul{
	margin-top:0;
	margin-bottom:0;
	
}
.about-othercontent .menu ul li{
	margin-bottom:0!important;
}
.about-othercontent .inner .menu .title span{
	font-size:0.9rem;
	font-weight:500;

}
.about-othercontent .inner .menu .image-area{
		margin-bottom:clamp(0.25rem,3vw,0.5rem);
}

@media (max-width: 900px) {
.about-othercontent .title-area{
	width:40%;
}
.about-othercontent .about-menu-box{
	width:60%;
}
	.about-othercontent .inner .title{
		font-size:clamp(1.5rem,3vw,1.5rem);
}
.about-othercontent .inner .title span{
font-size:clamp(0.75rem,1.2vw,0.9rem);
	margin-bottom:clamp(0.0rem,1vw,0.2rem)

}

}
@media (max-width: 800px) {
	.about-othercontent .menu ul{
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}
.about-othercontent .menu ul li{
	width:47%;
	margin-left:0;
	margin-right:0;
}
.about-othercontent .menu ul li .title span {
	
	line-height: 1.0;
}
}

@media (max-width: 740px) {
	.about-othercontent .inner{
	display: block;
}
	.about-othercontent .title-area{
	width:100%;
		margin-bottom:clamp(2rem,1vw,2.5rem)
}
.about-othercontent .about-menu-box{
	width:100%;
}
	.about-othercontent .inner .title{
		font-size:1.6rem;
}
.about-othercontent .inner .title span{
font-size:0.88rem;
	margin-bottom:0;

}
.about-othercontent .inner .menu .title span{
	font-size:0.8rem;

}
}


.bg-scnewspaper{
	background:#EDEDEC;
}
.bg-scnewspaper .read{
	margin:0 15vw;
	line-height:2.5;
	font-size:0.95rem;
}
.scnewspaper-content .page-index{
	background:#fff;
	margin:5rem 15vw;
	border-radius:15px;
	padding:3rem;
}
.scnewspaper-content .page-index h2{
	font-weight:200;
	font-size:1.3rem;color:#5e8897;
}
.scnewspaper-content .page-index ul{
	margin-bottom:1rem;
margin-top:1rem;
	counter-reset: index-counter;
}
.scnewspaper-content .page-index ul li{
	border-bottom:0.5px solid;
	 counter-increment: index-counter;
  list-style: none;
  position: relative;
}

.scnewspaper-content .page-index ul li a{
	display:block;
	padding:0.85rem 2.5rem 1rem 2.5rem;
	position:relative;
	
}
.scnewspaper-content .page-index ul li a::before {
  content: counter(index-counter, decimal-leading-zero) "";
  position: absolute;
  left: 0.5rem;
  top: 0.85rem;
	font-size:0.8rem;
	color:#5e8897;

}
.scnewspaper-content .page-index ul li a:hover{
	color:#5e8897;
}
.scnewspaper-content#lesson1{
	background:#fff;
}


@media (max-width: 800px) {
	.bg-scnewspaper .read{
	margin:0 5vw;
	line-heiht:2.5;
	font-:0.95rem;
}
.scnewspaper-content .page-index{

	margin:5rem 5vw;


}
	.scnewspaper-content .page-index ul li a{

	padding:0.85rem 2.0rem 1rem 2.0rem;
	
	
}
	.scnewspaper-content .page-index{
	
	margin:5rem 5vw;
	
	padding:3rem 1.5rem;
}
	.scnewspaper-content .page-index h2{
	text-align-last:center;
}
}


.hitozukuri-content .title-area{
	position:relative;
	text-align:center;
	margin-top:clamp(10rem,18vw,13rem);
	/* max-width: 900px; */
	margin-left:auto;
	margin-right:auto;
	background-image: url('../image/hitozukuri/hito-men.svg'),
	                  url('../image/hitozukuri/hito-women.svg');
	background-size: 380px auto, 380px auto;
	background-position: calc(50% - 600px) calc(50% - 0px),calc(50% + 600px) calc(100% - 20px);
	background-repeat: no-repeat, no-repeat;
}



.hitozukuri-content .title-area .dotted-logo img{
	width: 30%;
	max-width:200px;
}
.hitozukuri-content .title-area .dotted-title img{
	width:85%;
	max-width: 500px;
	margin:clamp(3rem,15vw,4rem);
	margin-left:auto;
	margin-right:auto;
}
.hitozukuri-content .title-area .dotted-kazari img{
	width:90%;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
	
}
.hitozukuri-content .title-area .read{width:85%;max-width:500px;margin:clamp(2rem,10vw,3rem);margin-left:auto;margin-right:auto;line-height:2;font-weight:500;position:relative;}

.hitozukuri-content .five-party-round{
width:250px;
	height:250px;
	position:absolute;
	 background-image: url('../image/hitozukuri/five-party-round.svg');
	 background-size:250px;
	 background-position: center;
	z-index:1;
	animation: rotateRound 30s linear infinite; /* 回転アニメ */
}
@keyframes rotateRound {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hitozukuri-content .five-party{width:250px;height:250px;margin-top: clamp(7rem,10vw,8rem);margin-bottom:clamp(20rem,10vw,20rem);margin-left:auto;margin-right:auto;line-height:2;font-weight:500;display: flex;justify-content: center;align-items: center;padding-top: 2rem;}
@media (max-width: 600px) {
	.hitozukuri-content .five-party{
		margin-bottom:clamp(12.5rem,8vw,10rem);
}
}
.hitozukuri-content .five-party img{
width:120px;
	
	
}

.hitozukuri-content .party-box {
	margin-bottom:clamp(5rem,15vw,10rem);
}
.hitozukuri-content .party-box .party-inner{
	width: 80%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
		margin-bottom:clamp(17rem,30vw,20rem);

	position:relative;
}
.hitozukuri-content .party-box .party-inner-content{
	background:#fff;
	border-radius:15px;
	box-sizing:border-box;
	
	border:4px solid #111;
	box-shadow:15px 15px 0 0 rgba(0,0,0,0.5);
	padding:clamp(1.5rem,5vw,2.5rem);
	position:relative;
	position: relative;
}
@media (max-width: 600px) {
.hitozukuri-content .party-box .party-inner{
	
	margin-bottom:12rem;
}	
}
.hitozukuri-content .party-box .party-inner h3{
	text-align:center;font-weight:700;
	font-size: clamp(1.5rem,6vw,2.7rem);
	line-height:1;}

.hitozukuri-content .party-box .party-inner .party-inner-box{
display: flex;
	justify-content: center;
}

.hitozukuri-content .party-box .party-inner .party-inner-box{display: flex;justify-content: space-between;align-items: stretch;margin-top: clamp(2rem,5vw,2.7rem);position:relative;}
.hitozukuri-content .party-box .party-inner .party-inner-box:before{
content:'';
	position:absolute;
	width:1px;
	height:100%;
	border-left:3px dotted;
	left:50%;
}
.hitozukuri-content .party-box .party-inner .party-inner-box .box-area{
	width: 46%;
}
@media (max-width: 800px) {
	.hitozukuri-content .party-box .party-inner-content{
	padding-top:clamp(2.5rem,5vw,3.5rem);
	padding-bottom:clamp(0.5rem,2vw,2.5rem);
}
.hitozukuri-content .party-box .party-inner h3{
	font-size:clamp(1.3rem,6.5vw,2.5rem);
}
	.hitozukuri-content .party-box .party-inner .party-inner-box{
display: block;
}
	.hitozukuri-content .party-box .party-inner .party-inner-box .box-area{
	width: 100%;
}	
.hitozukuri-content .party-box .party-inner .party-inner-box:before{
height:0;
	width:0px;
	
}
}
.hitozukuri-content .party-box .party-inner .party-inner-box .box-area h4{
text-align:center;
		border-top:3px dotted;
	border-bottom:3px dotted;
padding-top:clamp(0.75rem,5vw,1.8rem);
	padding-bottom:clamp(0.75rem,5vw,1.5rem);
}
.hitozukuri-content .party-box .party-inner .party-inner-box .box-area h4 img{
width:clamp(10rem,25vw,14rem);
}

.hitozukuri-content .box-area-info{
	margin-top:clamp(0.65rem,3vw,1rem);
}
.hitozukuri-content .box-area-info .mission-txt{
	font-size:0.95rem;
	line-height:1.5;
	font-weight:500;
}
.hitozukuri-content .box-area-info .mission-txt li{
	border:solid 1px;
	border-radius:5px;
	box-shadow:2px 2px 0 0 #111;
	box-sizing:border-box;
	padding:0.75rem 1rem;
	margin-bottom:0.75rem;
	font-weight: 600;
}
.hitozukuri-content .skill-area .skill-txt{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:0.25rem;
}
.hitozukuri-content .skill-area .skill-title{
	font-size:0.9rem;
	font-weight:500;
}
.hitozukuri-content .skill-area .plus-point{
	font-size: 1.4rem;
	font-weight:800;
}
.hitozukuri-content .skill-area .level-skill{
	margin-top:1.5rem;
	padding:1rem 1rem 1.5rem;
	border-radius:5px;
	height:5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position:relative;background:#fff75f;
}

.hitozukuri-content .skill-area .level-skill .lvtitle{
	margin-bottom:0.5rem;
}
@media (max-width: 800px) {
.hitozukuri-content .party-box .party-inner .party-inner-box .box-area h4 img{
width:clamp(12rem,38vw,14rem);
}
	.hitozukuri-content .box-area-info{
	margin-top:clamp(2rem,6vw,3rem);
	margin-bottom:clamp(2.5rem,6.5vw,3.5rem);
}	
}

/* 共通 */
.skill {
  margin-bottom: 1rem;
  position: relative;
  display: block;
}

/* ▼ ドットゲージ */
.dot-gauge {
  display: flex;
  gap: 4px;
  width: 100%;
}

.dot {
  width: 100%;
  height: 16px;
  background: #ccc; /* 未点灯の枠は常に表示 */
  border-radius: 2px;
  transition: background 0.1s;
}

.dot.active {
  background: #0068b4; /* 点灯色 */
}

/* ▼ レベルアップ */
.level-text {
  font-size: 1.3rem;
  font-weight: 500;
  z-index: 1;
	text-align:center;
	font-size:2.3rem;

}
.level-text .lvtitle{
  font-size: 1.3rem;
  

}
.level-up .lv {
  color: #4CAF50;
  text-shadow: 0 0 8px #81C784;font-size:2.3rem;

}

.lv {
  transition: transform 0.2s ease, color 0.3s;
}

.poko {
  transform: scale(1.3);
}

/* スパークエフェクト */
.sparkle {
  position: absolute;
  right: -25px;
  top: 0;
  font-size: 22px;
  color: gold;
  opacity: 0;
  pointer-events: none;
}

.sparkle.active::before {
  content: "✦";
  animation: sparkleAnim 1s forwards;
}

@keyframes sparkleAnim {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.5) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(90deg); }
}
.hitozukuri-content .kazari-kumo {
  background-image: url('../image/hitozukuri/town_cloud_01.png?2');
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(5rem,15vw,8rem);
  height: clamp(5rem,15vw,8rem);
  position: absolute;
  animation: pukaPuka 5s ease-in-out infinite;
}
.hitozukuri-content .kazari-ballon {
  background-image: url('../image/hitozukuri/town_balloon_01.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(2.5rem,10vw,3.5em);
  height: clamp(5rem,10vw,8rem);
  position: absolute;
  animation: pukaPuka 4s ease-in-out infinite;
	top: 15vw;
  right: 50%;
	margin-right:-30vw;
}
.hitozukuri-content .kazari-ballon2 {
  background-image: url('../image/hitozukuri/town_balloon_01.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(2.0rem,10vw,3.0em);
  height: clamp(5rem,15vw,8rem);
  position: absolute;
  animation: pukaPuka 2s ease-in-out infinite;
	top: 3vw;
  left:50%;
	margin-left:-35vw;
}

.hitozukuri-content .title-area .kumo1 {
  top: 1vw;
  right:50%;
	margin-right:-30vw;
	 animation: pukaPuka 3s ease-in-out infinite;
}
.hitozukuri-content .title-area .kumo2 {
  top: 15vw;
  left: 50%;
	margin-left:-36vw;
	animation: pukaPuka 2s ease-in-out infinite;
}
.hitozukuri-content .title-area .kumo3{
  top: -5vw;
  left: 50%;
	margin-left:-26vw;
}

@media (max-width: 700px) {
	.hitozukuri-content .kazari-kumo {
 
  width: clamp(5rem,5vw,8rem);
 
}
.hitozukuri-content .kazari-ballon {
 width: clamp(2.5rem,5vw,3.5em);
 top: 25vw;
 right: 8vw;
	margin-right:auto;
}
.hitozukuri-content .kazari-ballon2 {
 margin-right:auto;
  width: clamp(2.0rem,5vw,3.0em);
    left:50%;
	margin-left:-40vw;
}

.hitozukuri-content .title-area .kumo1 {
  top: 0vw;
  right: 0vw;
	margin-right:auto;
}
.hitozukuri-content .title-area .kumo2 {
  top: 28vw;
	left: 10%;
	margin-left:auto;
}
.hitozukuri-content .title-area .kumo3{
  top: -15vw;
  left: 10vw;
	margin-left:auto;
}


}
/* 雲がぷかぷか上下に動くアニメーション */
@keyframes pukaPuka {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.hitozukuri-content .party-box .party-inner .kazari-iinkai {
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(2.0rem,10vw,3.0em);
  height: clamp(5rem,15vw,8rem);
  position: absolute;
	top: 0;
  right: 3vw;
}
.hitozukuri-content .party-box .party-inner .kazari-iinkai {
  background-size: 100%;
  width: 5rem;
  height:5rem;
  position: absolute;
	top: 0.3rem;
  right: 3vw;

}

.hitozukuri-content .party-box .party-inner .active.iinkai1 {
  background-image: url('../image/hitozukuri/thing_pigeon_blue.png');
  animation: pyokoanimal 8s ease-in-out infinite;

}
.hitozukuri-content .party-box .party-inner .active.iinkai2 {
  background-image: url('../image/hitozukuri/thing_pigeon_pink.png');
 animation: pyokon-hanten2 8s ease-in-out infinite;
 right: 0;
	left:3vw;
	
}
.hitozukuri-content .party-box .party-inner .active.iinkai3 {
  background-image: url('../image/hitozukuri/thing_pigeon_green.png');
 animation: pyokoanimal 8s ease-in-out infinite;
}
.hitozukuri-content .party-box .party-inner .active.iinkai4 {
  background-image: url('../image/hitozukuri/thing_pigeon_gray.png');
 animation: pyokoanimal2 8s ease-in-out infinite;
 right: 0;
	left:3vw;
}
.hitozukuri-content .party-box .party-inner .active.iinkai5 {
  background-image: url('../image/hitozukuri/thing_pigeon_wh.png');
 animation: pyokoFlipXY 8s ease-in-out infinite;
}
.hitozukuri-content .party-box .party-inner .kazari-iinkai {
 

}
@keyframes pyokon-hanten {
  0%   { transform: translateY(0px) scaleX(1); }
  5%  { transform: translateY(-65px) scaleX(1); }
  40% { transform: translateY(-65px) scaleX(1); }
   41% { transform: translateY(-75px) scaleX(-1); }
	44% { transform: translateY(-65px) scaleX(1); }
	46% { transform: translateY(-65px) scaleX(1); }
	47% { transform: translateY(-75px) scaleX(-1); }
	50% { transform: translateY(-65px) scaleX(1); }
	85% { transform: translateY(-65px) scaleX(1); }
 90% { transform: translateY(0) scaleX(1); }
	100% { transform: translateY(0) scaleX(1); }
}
@keyframes pyokon-hanten2 {
  0%   { transform: translateY(0px) scaleX(-1); }
  5%  { transform: translateY(-65px) scaleX(-1); }
  40% { transform: translateY(-65px) scaleX(-1); }
   41% { transform: translateY(-75px) scaleX(1); }
	44% { transform: translateY(-65px) scaleX(-1); }
	46% { transform: translateY(-65px) scaleX(-1); }
	47% { transform: translateY(-75px) scaleX(1); }
	50% { transform: translateY(-65px) scaleX(-1); }
	85% { transform: translateY(-65px) scaleX(-1); }
 90% { transform: translateY(0) scaleX(-1); }
	100% { transform: translateY(0) scaleX(-1); }
}
@keyframes pyokoanimal {
  0%   { transform: translateY(0) rotate(0deg); }
  5%   { transform: translateY(-65px) rotate(0deg); }
  18%   { transform: translateY(-65px) rotate(0deg); }
  22%  { transform: translateY(-67px) rotate(-3deg); }
  24%  { transform: translateY(-65px) rotate(0deg); }
  24%  { transform: translateY(-65px) rotate(0deg); }
  28%  { transform: translateY(-67px) rotate(5deg); }
  30%  { transform: translateY(-65px) rotate(0deg); }
	40%  { transform: translateY(-65px) rotate(0deg); }
	42%  { transform: translateY(-67px) rotate(-3deg); }
  44%  { transform: translateY(-65px) rotate(0deg); }
  44%  { transform: translateY(-65px) rotate(0deg); }
  48%  { transform: translateY(-67px) rotate(5deg); }
  50%  { transform: translateY(-65px) rotate(0deg); }
  80%  { transform: translateY(-65px) rotate(0deg); }

  90%  { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes pyokoanimal2 {
  0%   { transform: translateY(0) rotate(0deg) scaleX(-1); }
  5%   { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  18%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  22%  { transform: translateY(-67px) rotate(-3deg) scaleX(-1); }
  24%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  28%  { transform: translateY(-67px) rotate(5deg) scaleX(-1); }
  30%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  40%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  42%  { transform: translateY(-67px) rotate(-3deg) scaleX(-1); }
  44%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  48%  { transform: translateY(-67px) rotate(5deg) scaleX(-1); }
  50%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  80%  { transform: translateY(-65px) rotate(0deg) scaleX(-1); }
  90%  { transform: translateY(0) rotate(0deg) scaleX(-1); }
  100% { transform: translateY(0) rotate(0deg) scaleX(-1); }
}

@keyframes pyokoFlipXY {
  0%   { transform: translate(0, 0) scaleX(1); }
5%   { transform: translate(0, -65px) scaleX(1); }
  18%   { transform: translate(0, -65px) scaleX(1); }
  20%  { transform: translate(10px, -67px) scaleX(-1); }
  23%  { transform: translate(0, -65px) scaleX(-1); }
  27%  { transform: translate(-10px, -67px) scaleX(1); }
  30%  { transform: translate(0, -65px) scaleX(1); }
38%  { transform: translate(0, -65px) scaleX(1); }
	 40%  { transform: translate(10px, -67px) scaleX(-1); }
  43%  { transform: translate(0, -65px) scaleX(-1); }
  47%  { transform: translate(-10px, -67px) scaleX(1); }
  50%  { transform: translate(0, -65px) scaleX(1); }


	  80%  { transform: translate(0, -65px) scaleX(1); }
	90%  { transform: translate(0, 0) scaleX(1); }

  100% { transform: translate(0, 0) scaleX(1); }
}
.hitozukuri-content .chara1 {
    background-image: url('../image/hitozukuri/hito-3s.svg?1');
	background-repeat: no-repeat;
  background-size: 100%;
	padding:8rem;
  position: absolute;
	top: -13rem;
  left: 50%;
	margin-left:-10rem;
	transform: scaleX(1); 
}
.hitozukuri-content .chara2 {
    background-image: url('../image/hitozukuri/hito-horenso.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    padding:9em;
    position: absolute;
    top: -14.0rem;
    left: 50%;
    margin-left:-8rem;
    transform: scaleX(-1);
}
.hitozukuri-content .chara3 {
    background-image: url('../image/hitozukuri/hito-sdgs.svg?1');
	background-repeat: no-repeat;
  background-size: 100%;
	padding:9rem;
  position: absolute;
	top: -14rem;
  left: 50%;
	margin-left:-11rem;
	transform: scaleX(1); 
}
.hitozukuri-content .chara4 {
    background-image: url('../image/hitozukuri/hito-credo.svg');
	background-repeat: no-repeat;
  background-size: 100%;
	padding:8rem;
  position: absolute;
	top: -13.0rem;
  left: 50%;
	margin-left:-7.5rem;
	transform: scaleX(-1); 
}
.hitozukuri-content .chara5 {
    background-image: url('../image/hitozukuri/hito-manar.svg?1');
    background-repeat: no-repeat;
    background-size: 100%;
    padding:8rem;
    position: absolute;
    top: -13.0rem;
    left: 50%;
    margin-left:-9rem;
    transform: scaleX(1);
}
@media (max-width: 600px) {
.hitozukuri-content .chara1 {

	padding:5.0rem;
	top: -8.0rem;
  left: 0%;
	margin-left:0;
	transform: scaleX(-1); 
}
.hitozukuri-content .chara2 {
   padding:5.0rem;
	top: -8.0rem;
  left: auto;
	margin-left:auto;
	right:0;;
	
	transform: scaleX(1); 
}
.hitozukuri-content .chara3 {
   
	padding:5.0rem;
	top: -7.5rem;
  left: 0%;
	margin-left:0;
	transform: scaleX(-1); 
}
.hitozukuri-content .chara4 {
   padding:5.0rem;
	top: -8.0rem;
  left: auto;
	margin-left:auto;
	right:0;
	transform: scaleX(1); 
}
.hitozukuri-content .chara5 {
   
	padding:5.0rem;
	top: -8.0rem;
  left: 0%;
	margin-left:0;

	transform: scaleX(-1); 
}
}
.hitozukuri-content .kazari-chara {
    
	animation: pixelNudge 0.5s steps(1) infinite;
}
	@keyframes pixelNudge {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -2px; }
}

 .hitozukuri-content .iinkai-select{
	width:80%;
	max-width:360px;
	 position:relative;
	 margin:0 auto;
	 margin-bottom:clamp(3rem,15vw,5rem);
} 
@keyframes blinkArrow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.hitozukuri-content .iinkai-select::before {
  content: '▶︎';
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: -0.75rem;
  margin-left: -5.5rem;
  animation: blinkArrow 1s infinite;
}

@media (max-width: 1400px) {
	.hitozukuri-content .title-area{
	
	background-size: clamp(100px, 27vw, 400px), clamp(100px, 27vw, 400px);
	background-position: left -50px bottom 16vw,right -50px bottom 16vw;
	
}
}
	
@media (max-width: 800px) {
	.hitozukuri-content .title-area{
	
	background-size: clamp(100px, 35vw, 400px), clamp(100px, 35vw, 400px);
	background-position: left 50px bottom 22vw,right 50px bottom 22vw;
}

}

@media (max-width: 800px) {
	.hitozukuri-content .title-area{
	
	background-size: clamp(100px, 35vw, 400px), clamp(100px, 35vw, 400px);
	background-position: left 8vw bottom 20vw,right 8vw bottom 20vw;
}
 .hitozukuri-content .iinkai-select{
	
	 margin-bottom:clamp(13rem,60vw,35rem);
} 
}


@media (max-width: 500px) {
.hitozukuri-content .iinkai-select::before {
  margin-left: -18vw;
}
}
.hitozukuri-content .iinkai-select:hover::before{
  
  
  animation: blinkArrow 0s infinite;
	animation: rotateArrow 0.6s linear infinite;
	transform: rotateY(0deg);

}

@keyframes rotateArrow {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}
.hitozukuri-content .iinkai-select a img{
	width:100%;
} 

.hitozukuri-content .iinkai-select a img:hover{
	opacity:1;
}
 .overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;   /* 画面幅いっぱい */
    height: 100vh;  /* 画面高さいっぱい */
    background-color: #0068b4;
    pointer-events: none; /* クリックを通す */
    transform: translateX(100%);
    animation-fill-mode: forwards;
    z-index: 9999;
  }

  /* アニメーション定義 */
  @keyframes slideOverlay {
    0% {
      transform: translateX(100%);
    }
    10% {
      transform: translateX(0);
    }
	  90% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

.iinkai-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  transform: translateX(100%);
  animation-fill-mode: forwards;
}

/* 空：長く残る */
@keyframes slideOverlaySky {
  0%   { transform: translateX(100%); }
  10%  { transform: translateX(0); }
  90%  { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 人：途中で出て早く抜ける */
@keyframes slideOverlayPerson {
  0%   { transform: translateX(100%); opacity: 0; }
  30%  { transform: translateX(0); opacity: 1; }
  60%  { transform: translateX(0); opacity: 1; }
	 70%  { transform: translateX(5%); opacity: 1; }
  90%  { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* 雲：ゆっくり遅れて出て最後まで残る */
@keyframes slideOverlayCloud {
  0%   { transform: translateX(100%); opacity: 0; }
  50%  { transform: translateX(0); opacity: 1; }
  90%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-50%); opacity: 0; }
}

.iinkai-overlay--sky {
  background-size: cover;
  opacity: 1;
}

.iinkai-overlay--person {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30vw auto;
  animation: slideOverlayPerson 1600ms ease forwards,
}

.iinkai-overlay--cloud {
  background-repeat: no-repeat;
   background-position: center left;
  background-size: cover;
  opacity: 0.8;

}


.hitozukuri-content .bottom-area{
	background:#4AAFD6;
	position:relative;
	margin-bottom:3rem;
}
.hitozukuri-content .bottom-area:after{
	content:'';
	width:100%;
	height:3rem;
	background:#fff;
	z-index:2;
	position:absolute;
}
.hitozukuri-content .bottom-area {
	margin-top:-8rem;
	padding-top:clamp(0em,10vw,5rem);
}


.hitozukuri-content .bottom-area .bottom-anime{
	width:100%;
	max-width: 800px;
	height: 400px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
@media (max-width: 700px) {
.hitozukuri-content .bottom-area {
	margin-top:-6rem;
}
	.hitozukuri-content .bottom-area .bottom-anime{
padding-top:55%;
	height: auto;
	
}
}

.hitozukuri-content .bottom-area .bottom-anime .tatemono{
	width:100%;
	height: 400px;
	background-image: url('../image/hitozukuri/bottom-block.svg');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 85% auto;
	position:absolute;
	bottom:0;
	z-index:1;
}

.hitozukuri-content .bottom-area .bottom-anime .hanabi1 {
  width: 181px;
  height: 181px;
  background-image: url('../image/hitozukuri/hanabi3.svg');
  background-repeat: no-repeat;
  background-size: 7680px auto;
  position: absolute;
  top: 0;
  left: 2%;
  animation: hanabiplay 2.1s steps(46) infinite;
	transform:scale(1);
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi2 {
  width: 181px;
  height: 181px;
  background-image: url('../image/hitozukuri/hanabi1.svg?1');
  background-repeat: no-repeat;
  background-size: 7680px auto;
  position: absolute;
  top: 2%;
  right: 17%;
  animation: hanabiplay 2.2s steps(46) infinite;
	transform:scale(0.6);
	
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi3 {
  width: 181px;
  height: 181px;
  background-image: url('../image/hitozukuri/hanabi2.svg?1');
  background-repeat: no-repeat;
  background-size: 7680px auto;
  position: absolute;
  top: -10%;
  right: -2%;
  animation: hanabiplay 2.0s steps(46) infinite;
	transform:scale(0.7);
}
@keyframes hanabiplay {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -7680px 0;
  }
}

@media (max-width: 600px) {
	.hitozukuri-content .bottom-area .bottom-anime .hanabi1 {
  top: 0;
  left: 0%;
	transform:scale(0.7);
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi2 {
  top: -5%;
  right: 4%;
	transform:scale(0.4);
	
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi3 {
  top: -15%;
  right: -11%;
	transform:scale(0.5);
}
}
@media (max-width: 460px) {
	.hitozukuri-content .bottom-area .bottom-anime .hanabi1 {
  top: -10%;
  left: -5%;
	transform:scale(0.5);
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi2 {
  top: -25%;
  right: -2%;
	transform:scale(0.3);
	
}
.hitozukuri-content .bottom-area .bottom-anime .hanabi3 {
  top: -15%;
  right: -18%;
	transform:scale(0.4);
}
}
.hitozukuri-content .bottom-area .waku{
	 width: 400px;
	 height:150px;
	 max-width:80%;
	 background-image: url('../image/hitozukuri/waku-bg.svg');
	 background-repeat: no-repeat;
	 background-size: 100% auto;
	 background-position:center;
	 margin-left:auto;
	 margin-right:auto;
	 text-align:center;
	 position:relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index:2
}
.hitozukuri-content .bottom-area .waku:after{
	 content:'▼';
	color:#fff;
	position:absolute;
	top:62%;
	font-size:clamp(0.5rem,3vw,1rem);
	animation: blinkArrow 0.2s infinite;
	
}
.hitozukuri-content .bottom-area .waku:hover:after{
	 animation: blinkArrow 0s infinite;
	animation: rotateArrow2 0.4s linear infinite;
	transform: rotateX(0deg);
	
}

@keyframes rotateArrow2 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.hitozukuri-content .bottom-area .active.waku:after{
	 content:'';
	
	
}
.hitozukuri-content .bottom-area .waku img{
	 width: 55%;
	display:block;
	margin-left:auto;
	 margin-right:auto;
 
}
.hitozukuri-content .bottom-area .waku:hover{
	cursor:pointer;
}
.hitozukuri-content .bottom-area .waku.active:hover {
  cursor: auto;
}
@keyframes rotateArrow {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

.hitozukuri-content .bottom-area .txt-kandomoji {
  width: 413px;
  height: 139.64px;
  background-image: url('../image/hitozukuri/txt-kandomoji.svg?2');
  background-repeat: no-repeat;
  background-size: auto 7680px;
  position: absolute;
 display:none;
	
	transform:scale(0.73);
}
.hitozukuri-content .bottom-area .active.txt-kandomoji {
  display:block;
 
  animation: kandomojiplay 5.0s steps(55) infinite;
	
}
@keyframes kandomojiplay {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -7680px;
  }
}
@media (max-width: 600px) {
	.hitozukuri-content .bottom-area .txt-kandomoji {
 
	transform:scale(0.65);
}
}
@media (max-width: 450px) {
	.hitozukuri-content .bottom-area .txt-kandomoji {
 
	transform:scale(0.57);
}
}
@media (max-width: 360px) {
	.hitozukuri-content .bottom-area .txt-kandomoji {
 
	transform:scale(0.50);
}
}

#scnewspaper-page{
				 width:100%;
				 overflow:hidden;
				 }

.hitozukuri-content .bottom-read{width: 80%;max-width: 500px;margin:clamp(2rem,10vw,3rem);margin-left:auto;margin-right:auto;line-height:1.85;font-weight:600;position:relative;font-size: 1.1rem;}
/* ==== RUNNING AREA（アニメ表示） ==== */
.running-area {
  position: fixed;
  top: -20vh;
  left: 5vw;
  height: 68vh;
  width: 88vw;
  z-index: -1; /* 初期は背面 */
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.6s ease,top 1.6s ease;
}

.running-area.active {
  opacity: 1;
  top: 15vh;
  height: 64vh;
  width: 88vw;
  z-index: 9; /* 表示時に前面 */
}

.running-area.active:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: -1; /* 背面に */
}


/* ==== 中身のアニメーション（スケール） ==== */
.running-area-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: transform 0.6s ease;
}

.running-area.active .running-area-inner {
  transform: scale(1);
}

/* ==== スライド背景上部 ==== */
.bg-wrapper {
  position: absolute;
  display: flex;
  width: auto; /* ← 1500px × 4 */
  height: 70%;
  top: 0;
  left: 0;
  animation: slideLoop 45s linear infinite;
  will-change: transform;
  z-index: 2;
}
.run-box{
	width:100%;
	overflow:hidden;
	position:relative;
	height:100%;
	border-radius:20px;
}

.bg-wrapper img {
  height: 100%;
  width:auto;
  flex-shrink: 0;
  object-fit: cover;
}

/* ==== 背景下部：ベタ色 ==== */
.run-bottom-wrapper {
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: #86C123;
  z-index: 2;
}

/* ==== 走る人 ==== */
.running-man {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 20%;
  margin-left: -75px;
  margin-top: -75px;
  z-index: 5;
	/* アニメーション追加 */
  transition: left 3.0s ease-in-out; /* left プロパティが3秒でスライド */
}
.running-man.active {
 
  left: 170vw;
 
}
.running-man img {
  width: 150px;
}


/* ==== 「やめる」ボタン ==== */
.boken-go {
  position: absolute;
  top: 10%;
  z-index: 4;
 width:100%;
	text-align:center;
	cursor:pointer;
}
.boken-go img{
 width:80%;
	max-width:400px;
	text-align:center;
}


.boken-go::before {
  content: '▶︎';
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: -1.30rem;
  margin-left:0.7rem;
  animation: blinkArrow 0.45s infinite;
}

.boken-go:hover::before{
  
  
  animation: blinkArrow 0s infinite;
	animation: rotateArrow 0.3s linear infinite;
	transform: rotateY(0deg);

}


.boken-no {
  position: absolute;
  bottom: 8%;
  /* right: 40px; */
  z-index: 4;
  width:100%;
  text-align: center;
  cursor:pointer;
}
.boken-no img{
width:35%;
  z-index: 4;
 max-width:150px;
}

/* ==== アニメーション定義（GPU対応） ==== */
@keyframes slideLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-25%, 0, 0);
  }
}

.credits-page .inner-box{
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:5rem auto 8rem;
	max-width:900px;
}

.credits-page .inner-box .title{
	width:45%;

}
.credits-page .inner-box .title .box{
		position:sticky;
	top:5rem;
	padding-bottom:5rem;

}
.credits-page .inner-box .title h2{
	font-size:1.7rem;
	line-height:1.7;
}

.credits-page .inner-box .title h2 span{
	display:block;
	font-size:1.1rem;
}
.credits-page .inner-box .title .release{
	display:block;
	font-size:0.9rem;
	margin:1.5rem 0;
}
.credits-page .inner-box .title img{
	width:80%;
	margin-top:clamp(2rem,5vw,3rem);
	margin-bottom:clamp(2rem,5vw,3rem);
}
.credits-page .inner-box .info{
	width:55%;
}
.credits-page .inner-box .info{
	border-left:0.5px solid;
	box-sizing:border-box;
	padding-left:5rem;
}
.credits-page .inner-box dt{
	margin-bottom:0.25rem;
	font-weight:500;
	font-size:0.9rem;
	
}
.credits-page .inner-box dd{
	margin-bottom:2.5rem;
}
.credits-page .inner-box dd:last-child{
	margin-bottom:0;
}

@media (max-width: 800px) {

	.credits-page .inner-box .title{
	width:100%;
		border-bottom:0.5px solid;
		padding-bottom:1rem;
		margin-bottom:4rem;
		
}
		.credits-page .inner-box .title,
	.credits-page .inner-box .title h2,
		.credits-page .inner-box .title p{
	text-align:center
}
	.credits-page .inner-box .info{
	width:100%;
		border-left:0px solid;
		padding-left:0rem;
		text-align:center;
}
	.credits-page .inner-box .title .box{
		position:relative;
	top:3rem;
	padding-bottom:auto;

}
}

.webdesign-content .read{	
margin-top:clamp(3rem, 7vw, 8rem);
margin-bottom:clamp(4rem, 7vw, 10rem);
	padding-bottom:clamp(4rem, 6vw, 9rem);
	border-bottom:0.5px solid;
	margin-left:auto;
	margin-right:auto;
	width:95%;
}
.webdesign-content .read p{	
margin-top:clamp(4rem, 6vw, 5rem);
	width:90%;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
}


.webdesign-content .webdesign-box{
	padding-top:clamp(3rem,10vw,7rem);
	width:100%;
}
.webdesign-content .webdesign-box .inner-content img{
	width:100%;
	margin-bottom:clamp(1.2rem,5vw,1.8rem);
}

.webdesign-content .midashi-area .nomber{
	font-size:0.7rem;
	font-weight:500;
	margin-bottom:0.5rem;
}
.webdesign-content .midashi-area .nomber span{
	font-size:1.1rem;
	
}
.webdesign-content .midashi-area h2{
	font-size:clamp(1.3rem,3.5vw,2rem);
	border-top:0.5px solid;
	border-bottom:0.5px solid;
	line-height:2;
	padding:1rem 0 1rem;
	font-weight:500;
	margin-bottom:clamp(1.4rem,5vw,1.8rem);
}
.webdesign-content .webdesign-box h3{
	font-size:clamp(1.2rem,3vw,1.4rem);
	line-height:1.5;
	padding:1rem 0;
	font-weight:500;
}
.webdesign-content .webdesign-box p{
	padding:1rem 0;
	margin-bottom:clamp(1.2rem,5vw,1.8rem);
}
.webdesign-content .webdesign-box .caption{
	font-size:0.9rem;
}
@media (max-width: 600px) {
.webdesign-content .webdesign-box .sp-br{
	display:block;
}
}
.page-index{
	background:#7898b7;
	border-radius:8px;
	color:#fff;
	padding:clamp(1.3rem,8vw,2.5rem);
	box-sizing:border-box;
}


.page-index h2{
	display:block;
	color:#fff;
	font-weight:300;
	font-size:1.3rem;
	letter-spacing:0.1rem;
	margin-bottom:1rem;
}
.page-index li a{
	display:block;
	color:#fff;
	
	font-size:0.95rem;
	border-bottom:0.5px solid #fff;
	padding:0.5rem;
}
.page-index li {
  counter-increment: section;
  position: relative;
}

.page-index li a {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  border-bottom: 0.5px solid #fff;
  padding: 0.7rem 0.3rem;
  padding-left: 3.5rem;
  position: relative;
	line-height:1.7
}
.page-index li a:hover {
  color:rgba(255,255,255,0.5);
}

.page-index li a::before {
  content: counter(section, decimal-leading-zero) "";
  position: absolute;
  left: 0rem;  
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 2rem; 
  text-align: right; 
  pointer-events: none;
	font-size:0.8rem;
}

#front-main .movie-box{
width:100%;
	overflow:hidden;
}

.grecaptcha-badge{
	z-index:1;
	display:none!important;
}


#openfactory-page img{
	width:100%;
		text-align:center;
display:block;
}

#openfactory-page img.mainimg{
	width:100%;
	margin-top:clamp(5rem,5vw,8rem);
}
#openfactory-page .read{
	margin-top:clamp(1rem,3vw,4rem);
	margin-left:5%;
	margin-right:5%;
	margin-bottom:clamp(2rem,6vw,7rem);
}

#openfactory-page img.dataimg{
	width:90%;
	max-width:800px;
	margin:0 auto;
	margin-bottom:clamp(3rem,10vw,10rem);
}

#openfactory-page .factory-box{
	background:#ccc;
	border-radius:10px;
	margin-bottom:clamp(3.5rem,5vw,5rem);
	padding-bottom:clamp(0.5rem,1vw,1rem);
	text-align:center;
	margin-left:5%;
	margin-right:5%;
}
#openfactory-page .factory-box img{
	width:90%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top: clamp(-3rem, -2vw, -0.5rem);
	padding-bottom:clamp(1.5rem,4vw,2rem);
}
#openfactory-page .factory-a{
	background:#fce8f0;

}
#openfactory-page .factory-b{
	background:#ceebfb;

}
#openfactory-page .factory-c{
	background:#e0dcee;

}
#openfactory-page .factory-d{
	background:#feecd2;

}
#openfactory-page .factoryinner-box{
	background:#fff;
	margin-left:5%;
	margin-right:5%;
	border-radius:10px;
	margin-bottom:clamp(2.5rem,5vw,4rem);
	border: 1.5px solid #fff;
	/* box-shadow:2px 2px 0 0 #111; */
}

#openfactory-page .factoryinner-box img{

	position:relative;
	top: clamp(-2rem, -2vw, -1.5rem);
	padding-bottom:0;
}
.factoryinner-box .ws-bt a{
	display:block;
	background:#ccc;
	margin-left:8%;
	margin-right:8%;
	margin-top:clamp(-3rem, -2vw, -0.5rem);
	margin-bottom:clamp(2.0rem,5vw,3rem);
	padding:clamp(1rem,5vw,2rem);
	border-radius:5px;
	box-shadow:0px 0px 0 0 #111;
	line-height:1.5;
	font-weight:500;
	font-size:clamp(0.97rem,3vw,1.2rem);
}
.factoryinner-box .ws-bt a{
	display:block;
	background:#ccc;
	margin-left:8%;
	margin-right:8%;
	margin-top: clamp(-3rem, -1vw, -0.5rem);
	margin-bottom:clamp(2.0rem,5vw,3rem);
	padding:clamp(1rem,5vw,2rem);
	border-radius:5px;
	box-shadow:0px 0px 0 0 #111;
	line-height:1.5;
	font-weight:500;
	font-size:clamp(0.97rem,3vw,1.2rem);
}
.factoryinner-box .ws-bt a span{
	display:block;
	font-size:0.85rem;
	font-weight:400;
	margin-top:0.25rem;
}
.inner-box-a .ws-bt a{
		background:#fce8f0;
}
.inner-box-b .ws-bt a{
		background:#d5ebd9;
}
.inner-box-c .ws-bt a{
		background:#d5d6bd;
}
.inner-box-d .ws-bt a{
		background:#fbdbba;
}
.factoryinner-box .ws-bt a:hover{
	
	box-shadow:3px 3px 0 0 #111;
}

@media (max-width: 700px) {
#openfactory-page .factoryinner-box img{

	top: 0.5rem;
}
	.factoryinner-box .ws-bt a{
	
	margin-top:clamp(0.75rem, 2vw, 1rem);
	
}
}

.post-password-form{
	padding:10rem 5% ;
	background:#ddd;
	
}