/*===============================

	共通
	common.css

================================*/

/*--------------------------------
	全体　
 --------------------------------*/
html, body {
	width: 100%;
	height: 100%;
	font-family: "Inter", "Noto Sans JP", hiragino-kaku-gothic-pron, "Hiragino Sans", "Hiragino Kaku Gothic PDivScrollroN", "Yu Gothic", yugothic, meiryo, sans-serif;
	background-color: #ffffff;
	margin: 0 0;
	color: #000000;
	overflow-x: clip;
}
body{
	display:grid;
}
html {
	width: 100%;
	height: 100%;
}
a {
	text-decoration: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
#DivCenterContent {
	height: auto;
	width: 100%;
	margin-top: 5vw;
	display:grid;
}
#DivScroll{
	height:3vw;
}
#DivFirstView {
	width: 100%;
}
.SmartCatchphrase{
	display:none;
}
section {
	position: relative;
	/*box-sizing: border-box;*/
	/*margin-bottom:5vw !important;*/
}
/* 2画面区切り */
.content-view.double {
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	margin: 5vw auto;
}
.content-view.double .contents {
	width: 70%;
	height:auto;
	margin: 3vw auto 3vw auto;
}
.left,
.right {
	/*height: 94%;*/
	width:100%;
	margin:auto;
	position:relative;
}
.grid-line{
	opacity:0.2;
}
.grid-line span{
	position:absolute;
	z-index:1;
	left:50%;
	transform:translateX(-50%);
	top:3%;
	width:1px;
	height:94%;
	background-color:#898989;
}
/*　1画面表示　*/
.content-view.single {
	width: 85%;
	margin:5vw auto;
}
.content-view.single .contents{
	width: 85%;
	height:auto;
	margin: 3vw auto 3vw auto;
}
/* タイトル1  */
#DivTopTitle {
	margin-top: 2vw;
	margin-left: 6vw;
	margin-bottom: 2vw;
}
.first-title {
	font-size: 2.5vw;
	border-bottom: solid 1px #bdbdbd;
	display: inline-block;
	line-height: 3.5vw;
	position: relative;
	padding-bottom:0.2vw;
}
.first-title::after{
	content:"";
	width: 4vw;
	height: 2px;
	display: inline-block;
	background-color: #008267;
	position: absolute;
	bottom: -1px;
	left: 0;
}
.sub-title{
	font-weight:300;
	font-size:1vw;
	margin-top:0.1vw;
	opacity:0.8;
}
/* タイトル２ */
.second-title {
	position: relative;
	font-size: 2.2vw;
	line-height: 4vw;
	margin-left: 1.5vw;
	margin-top: 2vw;
	margin-bottom: 2vw;
}
.second-title::before {
	content:"";
	position:absolute;
	top:45%;
	left:-1.5vw;
	width:10px;
	height:10px;
	background:#008267;
}
.fadeInDown {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1.5s;
	-ms-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

/* 強調文字 */
.emphasize {
	font-size: 1.6vw;
	line-height: 58px;
	margin-bottom: 1vw;
}
/*　コメント　*/
.comment{
	line-height:2.8vw;
	letter-spacing:0.5px;
	opacity:0.6 !important;
}
.blank{
	margin:1vw;
}
.text-animation {
	text-shadow: 1px 1px 0 #008267,1px -1px 0 #008267,-1px 1px 0 #008267,-1px -1px 0 #008267;
	color: #fff;
	opacity: 0.3;
	font-size: 5vw;
	width: 100%;
	letter-spacing: 2px;
	animation: showText 3s;
	text-align:center;
}
@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
}

/*　キャッチフレーズ　*/
.firstview-text {
    position: relative;
    justify-content:end;
    width:90%;
    z-index: 1000;
    bottom: 26%;
    left: 10%;
}
.catchphrase {
    display: grid;
    font-size: 2.5vw;
    line-height: 4.5vw;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
	margin-left:4vw;
	font-weight:normal;
}
.catchphrase .small{	
    font-size: 1.8vw;
    line-height: 4.5vw;
}
/*　スクロール　*/
.scroll a {
	display: inline-block;
	position: absolute;
	left: 40px;
	bottom: 10px;
	z-index: 1000;
	padding: 10px 10px 110px;
	color: #8d8d8d;
	font-size: 1vw;
	line-height: 1;
	letter-spacing: .2em;
	text-decoration: none;
	writing-mode: sideways-lr;
	transition: 0.5s;
	overflow: hidden;
	animation: scrollShow 4s;
}
@keyframes scrollShow {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.scroll a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: rgba(0, 0, 0, 0.1);
}
.scroll a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.8);
    height: 30px;
    animation: sdl07 1.5s ease infinite;
}
@keyframes sdl07 {
    0% {
        transform: translateY(-70px);
    }

    50%, 100% {
        transform: translateY(30px);
    }
}
/*--------------------------------
	ヘッダー 
 --------------------------------*/
header {
	width: 100%;
	height: 5%;
}
/*---------------------------------------*/
/*               スマホ　     　　       */
/*---------------------------------------*/
@media screen and (min-width:320px ) and (max-width:1079px) {
	body {
		font-size: min(3.5vw,20px);
	}
	#DivCenterContent{
		margin-top:16vw;
	}
	#DivScroll {
		height: 5vw;
	}
	.catchphrase .small {
		font-size: 4vw;
		line-height: 10vw;
	}
	.catchphrase {
		font-size: 5.5vw;
		line-height: 10vw;
	}
	.PcCatchphrase{
		display:none;
	}
	.SmartCatchphrase{
		display:block;
	}
	.firstview-text {
		bottom: 40vw;
		left: 13%;
	}
	/* タイトル1  */
	#DivTopTitle{
		margin-bottom:4vw;
	}
	.first-title {
		font-size: 4.5vw;
		line-height: 6.5vw;
	}
	.sub-title{
		font-size:2.5vw;
	}
	/* タイトル２  */
	.second-title {
		font-size: 4.5vw;
		margin-left:6vw;
		line-height:6vw;
		margin-right:2.5vw;
	}
	.second-title::before{
		width:6px;
		height:6px;
		left:-3vw;
		top:30%;
	}
	.second-title-area .second-title::before {
		width: 6px;
		height: 6px;
		left: -3vw;
		top: 25%;
	}
	.second-title-area {
		display: flex;
	}
	.second-sub {
		font-size: 2.5vw;
		line-height: 12.5vw;
		color: #008267;
	}
	span.small {
		font-size: 4vw;
	}
	/*　スクロール　*/
	.scroll a {
		left:0.5vw;
		font-size:2.5vw;
	}
	.smart-scroll{
		height:7vw;
	}
	.content-view.double {
		display: none;
	}
	.smart-contents-view {
		width: 90%;
		margin: 0 auto 10vw auto;
		border-top: dashed 1px #e7e5e5;
		padding-top:5vw;
	}
	.smart-contents-view.top{
		border-top:none;
	}
	.smart-contents{
		display:grid;
		grid-template-columns:50% 50%;
	}
	/* 強調文字 */
	.emphasize {
		font-size: 4.5vw;
		line-height: 12vw;
		width: 100%;
		text-align: center;
	}
	/*　コメント　*/
	.comment {
		line-height: 7vw;
		width: 100%;
	}
	.blank {
		margin: 3vw;
	}
}
/*---------------------------------------*/
/*                   PC       　　       */
/*---------------------------------------*/
@media screen and (min-width:1080px ){
	body{
		font-size:min(1.1vw,58px);
	}
	.smart-contents-view {
		display: none;
	}
}