@charset "UTF-8";

.top-page{
	overflow: hidden;
}

/* ===========================================
	メニューバー（トップページ挙動制御用
=========================================== */

#top-button-wrapper{
	
	background-color:transparent;
}

#top-menu-only{
	
	position:absolute;
}

#top-button-wrapper{
	color:#333333 !important;
}

#top-button-wrapper a{
 	color: #333333 !important;
}

.top-button a .hover{
 	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all  1s ease;
}

.top-button a .hover:hover{
	color: #073E74;
	
}

/* ===========================================
	コンセプト
=========================================== */

.toppage-content{
	text-align: center;
}

.message-wrapper{
	position: relative;
	color:#333333;
	overflow: hidden;
	
	max-height:1080px;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	
	min-height:600px;
}

#message-title{
	position: relative;
	
	height: 100%;
}

.message-title:before {
   	position:fixed;
   	top:0;
   	left:0;
   	//z-index:-1;
	display: inline-block;
	
   	width:100%;
	height:100%;
   	//background:url('../img/message3.jpg');
	background-image: url();
	
   	background-repeat:repeat-x;
	background-position:bottom;
	
	content:"";
	background-color: #000000;
	opacity: 0;
    -webkit-transition: opacity 3000ms;
    transition: opacity 3000ms;
}

.is-show:before {
    opacity: 1;
	background-image:url('../img/message/grad1.jpg');
}

.is-hide:before {
	opacity: 0 !important;
	background-image: url();
}

#message-img{
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;
	
	-webkit-justify-content:flex-start;
	-ms-flex-justify-content:flex-start;
	justify-content:flex-start;
	
	width:100%;
  	height:100%;
	//-webkit-transition:	all 3s ease;
	//transition:		all 3s ease;
}
	
#message-img img{
	height:100%;
	object-fit: cover;
	//transform: scale(1.1); /* 拡大 */
}

#management-title{
	position:absolute;
	
	color:#333333;
	left:26%;
	bottom:35%;
}

#management-title h2{
	
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: calc(44px + 32 * (100vw - 600px)/1200);
	letter-spacing: 0.2em;
	
	line-height:1;
}

.batsu-rotate {
  	display: inline-block;
	_display: inline;
	animation-name: rotate-anime;
    animation-duration: 3s;
    animation-timing-function: ease-out ;
    animation-iteration-count:1;
	//animation-delay: 0.5s;
}

@keyframes rotate-anime {
 100%{ transform: rotate(1080deg) }
}

.message{
	position:relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	
	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;	
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	padding-left:1em;
	padding-right:1em;
}

.message-content{
	position: relative;
	margin:0 auto;
	
}

.message-description{
	max-width:1000px;
	
	margin:6em auto 6em auto;
	
	font-size: calc(14px + 6 * (100vw - 600px)/1200);
	line-height:3em;
}


/* ===========================================
	スライドアニメーション
=========================================== */

/*bxsliderの外側部分の記述*/
#slider{
	//position: relative;
	width:100%;
	height:100%;
	vertical-align: middle;
	overflow: hidden;
	z-index:-999;
}

.slidezoom{
	/*XX秒かけてズームイン・アウトを永遠に繰り返す*/
	animation: animationZoom 10s ease-in-out 0s infinite normal;
}

.bx-viewport{
	height: 100%!important;
}

/*拡大した画像のはみ出した部分を隠すためのクラス*/
.slidewrap{
	width:100%;
	height:100%!important;
	overflow: hidden;
}

/*bxsliderに配置する画像のプロパティ*/
#slider img{
	width:100%;
	height:100%!important;
	line-height: 100%;

}

/*イメージをズームさせるCSS3アニメーション*/
@keyframes animationZoom {
  50%{ transform:scale(1.1); }        
}


/* ===========================================
	スマホ対応
=========================================== */

@media(max-width:1000px){
	
	#management-title{
		width:100%;
		bottom:2.5em;
		left:inherit;
	}
}

@media(max-width:400px){
	
	#management-title{
		width:100%;
		bottom:50px;
		left:inherit;
	}
	
}


/* ===========================================
	自己紹介
=========================================== */


.info-wrapper{
	position: relative;
	
	overflow: hidden;
	
	border-top: 0.5px solid #aaaaaa;
	
	background-color:#ECEEF5;
	//background-color: #F4F4F4;
}


#info-title7{
	position:absolute;	
	top:0px;
	left: 0px;
	width: 100%;
	text-align:left;
	color:#666666;
}

.info{
	position: relative;
	
	max-height:1600px;
	height:100vh;
	min-height: 920px;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;	
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	width: 100%;
}

.info-content{
	position: relative;
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	background-color:rgba(255, 255, 255, 0.7);
	border: 0.5px solid #bbbbbb;
	
	color:#333333;
	padding:6em;
	
	margin-top:10em;
	margin-bottom:10em;
	margin-left:10px;
	margin-right:10px;
}

#ryusuke-top{
	position: relative;
	
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	align-items: flex-end;
}

#ryusuke-top img{	
	width:24vw;
	max-width:280px;
	min-width:200px;
	border: 0.5px solid #cccccc;
}

#ryusuke-bottom{
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
		
	flex-wrap:wrap;
	
	-webkit-justify-content:space-between;
	-ms-flex-justify-content:space-between;
	justify-content:space-between;
	
	-webkit-box-align:flex-end;
  	-ms-flex-align:flex-end;
  	align-items:flex-end;	
	
	text-align: left;
	
	//height:100%;
	max-width:600px;
}

#my-namebox{
	width:100%;
	text-align:right;
	letter-spacing:0.08em;
	
	padding-bottom:2em;
}

#my-englishname{
	
	font-family: 'Cinzel', serif;
	font-weight: 600;
	
	color:#111111;
	font-size: calc(30px + 10 * (100vw - 600px)/1200);
	line-height:1;
}

#my-name{
	font-family: 'Noto Serif JP', serif;
	font-size: calc(13px + 4 * (100vw - 600px)/1200);
	font-weight:700;
	line-height:1.5;
}

#my-name h1{
	font-family: 'Noto Serif JP', serif;
	font-size: calc(13px + 4 * (100vw - 600px)/1200);
	font-weight:700;
	line-height:1.5;
	
	display:inline-block;
}

#my-name h5{
	display:inline-block;
	font-family: 'Noto Serif JP', serif;

	font-size: calc(20px + 5 * (100vw - 600px)/1200);
	font-weight:700;
	margin:0;
	padding-left:0.8em;
	letter-spacing:0.2em;
}

#my-position{
	
}

#my-position h6{
	display:inline-block;
	font-size: calc(10px + 4 * (100vw - 600px)/1200);
	padding-top:0.5em;
	margin:0;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
}

#my-detail{
	
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:space-between;
	-ms-flex-justify-content:space-between;
	justify-content:space-between;
	
	-webkit-box-align:end;
  	-ms-flex-align: end;
  	align-items:end;
	
	text-align: left;
	
	width:100%;
	
	font-size: calc(13px + 3 * (100vw - 600px)/1200) !important;
	max-width:36em;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
}

#ryu-description{
	
	padding-left:3em;
	padding-right:1em;
	//min-width: 240px;
}

#ryu-history{
	
	//letter-spacing: 0;
	line-height:2em;
}

.ryu-link{
	margin-top:1em;
	padding-bottom:0.5em;
}

.ryu-link a{
	
	color:#073E74;
}

.ryu-link-A:hover {
	background-color:#EDF3F7;
	border: 0.5px solid #073E74;
}

.ryu-link-A{
	position: relative;
	font-size: calc(9px + 3 * (100vw - 600px)/1200);
	
	padding-left:1em;
	padding-right:1em;
	height:2.3em;
	line-height:2.3em;	
	
	display: inline-block;
	_display: inline;
	
	border: 0.5px solid #073E74;
	background-color:#EDF3F7;
}

.ryu-link-B{
	position: relative;
	display: inline-block;
	_display: inline;
	text-indent:0.5em;
	font-size: calc(11px + 3 * (100vw - 600px)/1200);
	
	//color:#EDF3F7;
}

#my-SNS{
	position: relative;
	
	text-align:center;
	
	max-width:160px;
	width:20vw;
	min-width:120px;
	margin-top:2em;
}

#instagram-bg{
	position: absolute;
	bottom:0;
	right:0px;
	
	text-align:center;
}

#instagram-bg img{
	width: 100%;
	object-fit: cover;
}

.instagram{
	position: relative;
	width:100%;
	
}

.instagram img{
	margin:0px;
	width:100%;
	border: 0.5px solid #cccccc;
}

#insta-name{
	position: relative;
	color:#333333;
	line-height: 1;
	font-size: calc(10px + 3 * (100vw - 600px)/1200);
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
}


/* ===========================================
	スマホ対応
=========================================== */

@media(max-width:900px){
	
	.info{
		
		height:auto;
		//min-height: 920px;
	}
	
	.info-content{
		padding:4em 0em;
		flex-wrap: wrap;
		max-width:555px;
	}
		
	#ryusuke-top img{
		width:30vw;
		max-width:300px;
	}
	
	#ryusuke-bottom{
		
		margin-top:2em;
		margin-left:0em;
		margin-right:0em;
		padding-left:2em;
		padding-right:2em;
		text-align:center;
		max-width:400px;
	}
	
	#my-namebox{
		
		text-align:center;
		width:100%;
		padding-bottom:30px;
	}
	
	#my-namebox div{
		text-align: center;
	}
	
	#my-englishname{
		font-size: calc(28px + 14 * (100vw - 600px)/1200);
	}
		
	#my-name {
		margin-top:1em;
		font-size: calc(12px + 4 * (100vw - 600px)/1200);
	}
	
	#my-name h5{
		display:block;
		padding-left:0;
		font-size: calc(22px + 11 * (100vw - 600px)/1200);
	}
	
	#my-detail{
		flex-wrap:wrap;
		text-align: center;
	
		-webkit-justify-content:center;
		-ms-flex-justify-content:center;
		justify-content:center;

		-webkit-box-align:center;
		-ms-flex-align: center;
		align-items:center;
	}

	#ryu-description{
		padding-left:0;
		padding-right:0;
		padding-bottom:20px;
		
		max-width:auto;
	}
	
	#my-SNS{
		width:100%;
		min-height: 140px;
		margin-left:0;
		padding-bottom:20px;
		text-align: center;
	}
	
	#my-SNS div{
		margin:0 auto;
		max-width:1000px;
		width:auto;
	}
	
	#instagram-bg{
		top:0;
	}
	
	.instagram{	
		max-width:1000px;
		width:auto;
	}
}


/* ===========================================
	mission　ミッション
=========================================== */

.mission-wrapper{
	position:relative;
	
	min-height: 100vh;
	text-align: center;
		
	padding-bottom:0;
	margin-bottom: 0;
	
}

.mission{
	position:relative;
	
	width:100%;
	margin-top:0px;
	
	text-align: center;
	color:#333333;
}

.mission-content{
	position:relative;
	background-color:#073E74;
}

#mission-title{
	position:absolute;	
	top:0px;
	text-align: center;
	color:#ffffff;
}

.senryaku-title{
	position: relative;
	
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	
	font-size: calc(40px + 36 * (100vw - 600px)/1200);
	
	padding-top:2.5em;
	padding-bottom:0.5em;
	
	color:#ffffff;
}

#kurukuru{
	display: inline-block;
	_display: inline;
	margin: 0;
	padding: 0;
  	vertical-align:top;
	width:2.1em;
	height:1.5em;
	overflow: hidden;
}

#kurukuru span{
  	position: relative;
  	display: inline-block;
	_display: inline;
  	width: 100%;
  	height: 100%;
	top:0px;
	white-space: nowrap;
}

/* アニメーション */
.ShiftingText{
	animation-name: ShiftText;
    animation-duration: 0.5s;
    animation-timing-function:linear;
    animation-iteration-count:2;
	animation-fill-mode:none;
	
	-webkit-animation-name: ShiftText;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:2;
	-webkit-animation-fill-mode:none;
}

@-webkit-keyframes ShiftText{
	0%,10%{
    	top: 0;
 	}
	11%,20%{
    	top: -1.5em;
  	}
	21%,30%{
    	top: -3.0em;
  	}
	31%,40%{
    	top: -4.5em;
  	}
	41%,50%{
    	top: -6.0em;
  	}
	51%,60%{
    	top: -7.5em;
  	}
	61%,70%{
    	top: -9.0em;
  	}
	71%,80%{
    	top: -10.5em;
  	}
	81%,90%{
    	top: -12.0em;
  	}
	91%,100%{
    	top: -13.5em;
  	}
}

@keyframes ShiftText{
	0%,10%{
    	top: 0;
 	}
	11%,20%{
    	top: -1.5em;
  	}
	21%,30%{
    	top: -3.0em;
  	}
	31%,40%{
    	top: -4.5em;
  	}
	41%,50%{
    	top: -6.0em;
  	}
	51%,60%{
    	top: -7.5em;
  	}
	61%,70%{
    	top: -9.0em;
  	}
	71%,80%{
    	top: -10.5em;
  	}
	81%,90%{
    	top: -12.0em;
  	}
	91%,100%{
    	top: -13.5em;
  	}
}

#senryaku-topmessage{
	position: relative;
	
	width:100%;
	
	font-size: calc(14px + 5 * (100vw - 600px)/1200);
	line-height:2.5;
	
	padding-top:1em;
	padding-bottom:8em;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
		
	color:#ffffff;
}

#senryaku-topmessage div{
	position: relative;
	
	max-width:40em;
	margin:0 auto;
}

.nextArrow{
	position: absolute;
	bottom:0;
	width:100%;
	overflow: hidden;
	text-align: center;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
		
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
}

.nextArrow img{
	position: relative;
	width:100%;
	z-index:99;
	min-width:1200px;
	object-fit: cover;
}

#nextArrow-mission{
	bottom:-5em;
}

.nextArrowTitle{
	position:absolute;
	text-align: center;
	width:100%;
}

.nextArrowTitle div{
	position: relative;
	margin:0 auto;
	font-family: 'Kanit', sans-serif;
	font-weight: 400;
	
	font-size: calc(21px + 7 * (100vw - 600px)/1200);
	
	color: #073E74;
}

#nextArrowTitleP{
	top:1em;
}



/* ===========================================
	3つの課題。
=========================================== */

.pien-wrapper{
	position: relative;
	
	width:100%;
	background-color:#ffffff;
	margin-bottom:0em;
}

.pien{
	position: relative;
	width:100%;
	padding-top:2em;
	padding-bottom:2em;
}

.pien-content{
	position: relative;
	width:100%;
	padding-top:3em;
	padding-bottom:3em;
}
	
.pien-content-inn{
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	flex-wrap:wrap;
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	-webkit-box-align:center;
  	-ms-flex-align: center;
  	align-items:center;

	width: calc(100% - 20px);
	max-width:1200px;
	padding-left:10px;
	padding-right:10px;
	margin:0 auto;
}


.pien-img{
	position:relative;
	
	overflow: hidden;
	width:50%;
	
	text-align:left;
}

.pien-img img{
	vertical-align:top;
	width:100%;
	height: auto;
	
	object-fit: cover;
	
	transition: transform 0.3s ease;
	box-sizing: border-box;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-box-align:center;
  	-ms-flex-align: center;
  	align-items:center;
	
	filter: grayscale(100%);
}

.pien-img .mask {
	position:		absolute;
	width:			100%;
	height:			100%;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	
	background-color:	rgba(0,0,0,0.25);
	
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-box-align:center;
  	-ms-flex-align: center;
  	align-items:center;
}

.pien-img .caption {
	
	font-size: calc(24px + 12 * (100vw - 600px)/1200);	
	
	font-family: 'Kanit', sans-serif;
	font-weight: 200;
	
	color:#ffffff;
	padding-left:0px;
}

.pien-img:hover img{
	transform: scale(1.05); /* 拡大 */
	filter: grayscale(0%);
}

.pien-img:hover .mask {
	opacity:1;
	padding-left:10%;	/* 右にずらす */
}

.problem-words{
	position: relative;
	
	width:50%;
	
	text-align:left;
	
	color:333333;
	font-size: calc(11px + 3 * (100vw - 600px)/1200);
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	flex-wrap:wrap;
	
	-webkit-justify-content:flex-start;
	-ms-flex-justify-content:flex-start;
	justify-content:flex-start;
	
}

.problem-words-inn{
	position: relative;
	padding-left:5em;
	margin-top: 2em;
	opacity: 0;/*初期状態では透明に*/
}

.problem-SlideIn{
	animation: SlideIn 0.5s forwards;
	animation-delay: 0.5s;
}
/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.problem-title{
	position:relative;

}

.problem-title-n{

	font-size: calc(15px + 5 * (100vw - 600px)/1200);
	
	font-family: 'Cinzel', serif;
	font-weight: 600;
	
	color:#888888;
	//color:#073E74;
}

.problem-title-j{
	font-family: 'Noto Serif JP', serif;
	font-size: calc(24px + 14 * (100vw - 600px)/1200);
	font-weight:700;
	color:#555555;
}


.problem-description{
	position: relative;
	
	font-size: calc(13px + 3 * (100vw - 600px)/1200);
	line-height:2em;
	margin-top: 1em;
	margin-bottom: 0.3em;
	max-width:25em;
}

.problem-link{
	position: relative;
	
	padding-top:1em;
	padding-bottom:0.1em;
	
	width:100%;
	color:#073E74;
}

.problem-link a{
	color:#073E74;
}

.problem-link a:hover{
	
	color:#073E74;
}

.problem-link-A{
	position: relative;
	font-size: calc(9px + 3 * (100vw - 600px)/1200);
	
	padding-left:1em;
	padding-right:1em;
	height:2.5em;
	line-height:2.5em;	
	border: 0.5px solid #073E74;
	
	display: inline-block;
	_display: inline;
	
	background-color:#EDF3F7;
}

.problem-link-B{
	position: relative;
	display: inline-block;
	_display: inline;
	text-indent:0.5em;
}

#pien-2 .problem-words-inn{
	padding-left:0em;
	padding-right:5em;
}

#pien-2 .problem-words{
	
	-webkit-justify-content:flex-end;
	-ms-flex-justify-content:flex-end;
	justify-content:flex-end;
}

#nextArrow-pien{
	bottom:-160px;
}

#nextArrowTitleA{
	top:100px;
}

#pien-3 .pien-img{
	z-index:200;
}

#pien-3 .problem-words{
	z-index:200;
}


/* ===========================================
	スマホ対応
=========================================== */


@media(min-width:1920px){
	.mission-wrapper{
		background-size: 100% auto;
	}
}

@media(max-width:800px){
	
	.pien{
		padding-bottom:0em;
	}
	
	.pien-img{
		width:100%;
		max-width: 500px;
		max-height:260px;
	}
	
	.problem-description{
		max-width:26em;
	}
	
	.problem-words{
		width:100%;
		max-width: 500px;
	}
	
	.problem-words-inn{
		padding-left:0.5em;
		padding-top:2.5em;
		margin-top: 0em;
	}
	
	#pien-2 .pien-content-inn{
		flex-wrap: wrap-reverse;
	}
	
	#pien-2 .problem-words{
		-webkit-justify-content:flex-start;
		-ms-flex-justify-content:flex-start;
		justify-content:flex-start;
	}
	
	#pien-2 .problem-words-inn{
		padding-left:0.5em;
		padding-top:2.5em;
	}
	
}

@media(max-width:560px){
	.problem-words-inn{
		padding-left:3em;
		padding-top:3em;
	}
	
	#pien-2 .problem-words-inn{
		padding-left:3em;
		padding-top:3em;
	}
}



/* ===========================================
	アンサー
=========================================== */

#answer-wrapper{
	position: relative;
	
	text-align: center;
	background-color:#ffffff;
	padding-top:80px;
}

#answer{
	position: relative;
	width: 100%;
}

#answer-img{
	position: relative;
	width:100%;
	
	overflow: hidden;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;	
}

#answer-img img{
	
  	width:100%;
	max-height:600px;
	min-height:500px;
	object-fit: cover;
}

#answer-img .mask {
	
}

#answer-words-wrapper {
	position: absolute;
	
	height:100%;
		
	top:0px;
	right:0px;
		
	line-height:2;
	
	overflow: hidden;
	width:calc(100% - 30px);
	padding-left:15px;
	padding-right:15px;
	
	background-color:rgba(255, 255, 255, 0.75);
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
		
	-webkit-justify-content:right;
	-ms-flex-justify-content:right;
	justify-content:right;
	
	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;
	max-width:40em;
}

#answer-words{
	position: relative;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	font-size: calc(14px + 4 * (100vw - 600px)/1200);
		
	text-align: left;
	
	padding-right:4em;
	padding-left:4em;
	padding-top:4em;
	padding-bottom:2em;
	//background-color: red;
	
	color:#333333;
	
}

#answer-title{
	position: relative;
	
}

#answer-title span{	

	font-size: calc(12px + 8 * (100vw - 600px)/1200);
	
	font-family: 'Cinzel', serif;
	font-weight: 600;
	
	//color:#ffffff;
}

#answer-title p{	
	font-family: 'Noto Serif JP', serif;
	font-size: calc(24px + 8 * (100vw - 600px)/1200);
	font-weight:700;
	
	padding: 0em 0 0.3em 0;
	margin: 0;
	line-height:1;
}

#answer-description{
	position: relative;
	
	padding-top: 1em;
	padding-bottom:1em;
	//line-height: 2.3em;
}

#answer-description a,a:visited{
    color: inherit;
}

.answer-link{
	position: relative;
	
	width:100%;
	font-size: calc(12px + 3 * (100vw - 600px)/1200);
	
	padding-top:1em;
	padding-bottom:0.1em;
	
	color:#073E74;
}

.answer-link a{
	color:#073E74;
}

.answer-link a:hover{
	
	color:#333333;
}

.answer-link-A{
	position: relative;
	font-size: calc(9px + 3 * (100vw - 600px)/1200);
	
	padding-left:1em;
	padding-right:1em;
	height:2.5em;
	line-height:2.5em;	
	
	border: 0.5px solid #073E74;
	
	display: inline-block;
	_display: inline;
	
	background-color:#EDF3F7;
}

.answer-link-A:hover {
	//background-color:blue;
	//background-color:rgba(0, 0, 0, 0.2);
}

.answer-link-B{
	position: relative;
	display: inline-block;
	_display: inline;
	text-indent:0.5em;
}

/* ===========================================
	スマホ対応
=========================================== */


@media(max-width:1000px){
		
	#answer-img{
		-webkit-box-align:flex-end;
  		-ms-flex-align:flex-end;
  		align-items:flex-end;
		max-height:320px;
	}
	
	
	#answer-words-wrapper {
		position:relative;
		-webkit-justify-content:center;
		-ms-flex-justify-content:center;
		justify-content:center;
		max-width:1000px;
	}

	#answer-words{
		padding-right:3em;
		padding-left:3em;
		margin-right:auto;
		margin-left:auto;
		padding-bottom:5em;
		max-width:36em;
	}
}





/* ===========================================
	サービス
=========================================== */

.service-wrapper{
	position:relative;	
	
	width:100%;

	border-top: 0.5px solid #aaaaaa;
	overflow: hidden;
	
	background-color:#ffffff;
	//background-color:#ECEEF5;
}

.service{
	position:relative;
	
	text-align:left;
	
	
	padding-top:8em;
	padding-bottom:4em;
	
	width:100%;
	//max-width:1620px;
	
	margin:0 auto;
}

#service-title{
	position:absolute;	
	top:0px;
	left:0px;
	
	text-align:center;
	color:#333333;
}


#service-head{
	position: relative;
	
	margin-top:2em;
	margin-bottom:4em;
	
	text-align: left;
	
	width:100%;
	
}

#service-head-inner{
	position: relative;
	
	width:100%;
	
	padding-top:6em;
	padding-bottom:6em;
	
	background-color:#073E74;
	//background-color:#ECEEF5;
	color:#eeeeee;
	
	max-width:900px;
}

.triangle1-2 {
	position: absolute;
	bottom:0px;
	right:0px;
  	border-left: 200px solid transparent;
  	border-bottom: 460px solid #ffffff; 
  	height: 0;
  	width: 0;
}


#service-head-title{
	position: relative;
	
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	
	font-size: calc(35px + 30 * (100vw - 600px)/1200);
	
	z-index:100;
	//height:140px;
	//line-height: 140px;
	//vertical-align: middle;
	
	padding-left:6vw;
}


#service-topmessage{
	position: relative;
	
	width:100%;

	text-align: center;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	font-size: calc(14px + 5 * (100vw - 600px)/1200);
	line-height:2.2;

	padding-top: 2em;
	padding-bottom: 2em;
	
	padding-left:6vw;
}

#service-topmessage div{
	position: relative;
	text-align: left;
	max-width:32em;
}


/* ===========================================
	キーポイント
=========================================== */

.vital-wrapper{
	position:relative;
	
	width:100%;
	
	margin-top:-12em;
	padding-top:15px;
}

.vital{
	position: relative;	
	
	font-size: calc(12px + 5 * (100vw - 600px)/1200);	
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	
	
	flex-wrap: wrap;
	
	width: calc(100% - 20px); /* margin padding分を引く */
	max-width:1620px;
	
	margin:0 auto;
}

.vital-content{
	position: relative;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */

	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;

	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	
	width:100%;
	
	max-height:400px;
	min-height:360px;
	margin:15px;
	overflow: hidden;
		
	z-index: 100;
	
}

.vital-img{
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	
	//min-height:300px;
	max-width:500px;
	overflow: hidden;
	
	border: 0.5px solid #bbbbbb;
	border-collapse: collapse;
	//width:100%;
	
}

.vital-img img{
	min-height:360px;
	width: 100%;
	object-fit: cover;
	vertical-align:top;
}

.vital-img .mask {
	position:		absolute;
	width:			100%;
	height:			100%;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	
	background-color:	rgba(0,0,0,0.4);
	
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-box-align:center;
  	-ms-flex-align: center;
  	align-items:center;
}

.vital-img .caption {
	
	font-size: calc(24px + 12 * (100vw - 600px)/1200);	
	
	font-family: 'Kanit', sans-serif;
	font-weight: 200;
	
	color:#ffffff;
	padding-left:0px;
}

.vital-img:hover img{
	transform: scale(1.05); /* 拡大 */
}

.vital-img:hover .mask {
	opacity:1;
	padding-left:10%;	/* 右にずらす */
}


.vital-words{
	position: relative;
	
	font-size: calc(13px + 3 * (100vw - 600px)/1200);
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	text-align: left;
	
	max-width:500px;
	
	padding:0em 2em 0em 3em;
	
	background-color:#ffffff;
	
	border: 0.5px solid #bbbbbb;
	border-collapse: collapse;
	
	height:100%;
	box-sizing: border-box;
	
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	
}


.vital-words >div{
	position: relative;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;

	-webkit-justify-content:flex-start;
	-ms-flex-justify-content:flex-start;
	justify-content:flex-start;
	
	flex-wrap: wrap;
}

.vital-number{
	position: relative;
	width:100%;
	
	font-family: 'Cinzel', serif;
	font-weight: 600;
	
	font-size: calc(13px + 3 * (100vw - 600px)/1200);
	
	line-height:1em;
	height:1em;
	
	color:#777777;
}

.vital-catch{
	position: relative;
	width:100%;
	
	font-family: 'Noto Serif JP', serif;
	font-size: calc(18px + 9 * (100vw - 600px)/1200);
	font-weight:700;
	
	padding:0;
	margin: 0;
	line-height:2;
	
}

.vital-description{
	position: relative;
	
	width:100%;
	
	max-width:24em;
	line-height:2;
}

.vital-link{
	position: relative;
	width:100%;
	
	margin-top:2em;
	line-height:2em;
	height:2em;
	font-size: calc(11px + 3 * (100vw - 600px)/1200);
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	color:#073E74;
}

.vital-link a{
	color:#073E74;
}


.vital-link-A{
	position: relative;
	font-size: calc(9px + 3 * (100vw - 600px)/1200);
	
	padding-left:1em;
	padding-right:1em;
	height:2.3em;
	line-height:2.3em;	
	
	display: inline-block;
	_display: inline;
	
	border: 0.5px solid #073E74;
	background-color:#EDF3F7;
}


.vital-link-B{
	position: relative;
	display: inline-block;
	_display: inline;
	text-indent:0.5em;
	//color:#073E74;
}

.vital-link-B:hover {
	color:#073E74;
}


/* ===========================================
	画面繋ぎのデザイン
=========================================== */


.arrow{
	position: relative;
	margin-top:-200px;
	
	width:100%;
	overflow: hidden;
	text-align: center;
	
	z-index:99;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
		
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	display: none;
}

.arrow img{

	width:100%;
	min-width:1200px;
	object-fit: cover;
}


/* ===========================================
	ソリューション
=========================================== */


.point-wrapper{
	position:relative;	
	
	text-align: center;
	
	padding-top: 2em;
	background-color:#ffffff;
	
	width:100%;
}


#point-title{
	position:absolute;	
	top:0px;
	left:0px;
	
	z-index:999999;
}

.point{
	position:relative;
	width:100%;
	text-align:center;
	
	//width: calc(100% - 20px); /* margin padding分を引く */
	width:100%;
	//max-width:1620px;
	
	margin:0 auto;
	
}

#point-head{
	position: relative;
	
	margin-top:2em;
	margin-bottom:4em;
		
	text-align: left;
		
	width:100%;
}

#point-head-inner{
	position: relative;
	
	width:100%;
	//margin:0 auto;
	
	padding-top:6em;
	padding-bottom:6em;
	
	//background-color:#ECEEF5;
	background-color:#073E74;
	//background-color:#ECEEF5;
	color:#eeeeee;
	
	max-width:900px;
}

#point-head-title{
	position: relative;
	
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	
	font-size: calc(35px + 30 * (100vw - 600px)/1200);
	
	z-index:100;
	//height:140px;
	//line-height: 140px;
	
	padding-left:5vw;
}


#point-topmessage{
	position: relative;
	
	width:100%;

	text-align: center;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	font-size: calc(14px + 5 * (100vw - 600px)/1200);
	line-height:2.2;

	padding-top: 2em;
	padding-bottom: 2em;
	
	padding-left:5vw;
}

#point-topmessage div{
	position: relative;
	text-align: left;
	max-width:32em;
}



.point-bottom{
	position: relative;
		
	//background-color:#f4f4f4;
	
	font-size: calc(12px + 5 * (100vw - 600px)/1200);
	padding-bottom:6em;
}




/* ===========================================
	ソリューション
=========================================== */

.solution-wrapper{
	position: relative;
	
	width:100%;
	margin-top:-180px;
}

.solution{
	position: relative;
	
	
	padding-left:10px;
	padding-right:10px;
	
	width: calc(100% - 20px); /* margin padding分を引く */
	max-width:1420px;
	
	margin:0 auto;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	flex-wrap:wrap;
	
	//background-color:#f4f4f4;
}


.solution-content{
	position: relative;
	
	width:calc(33.333% - 30px);
	margin-left:15px;
	margin-right:15px;
	margin-top:3em;
	margin-bottom:3em;
	
	color:#333333;
	
	background-color:#ffffff; 
	
	border: 0.5px solid #aaaaaa;
	box-sizing:border-box;
}

.solution-description{
	position: relative;
		
	font-size: calc(13px + 3 * (100vw - 600px)/1200);
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	text-align:center;
	color:#333333;
	
	margin-top:-4em;
	//background-color: red;
}


.solution-icon{
	position: relative;
	
	width:100%;
	text-align: center;
}

.solution-icon img{

	margin: 0 auto;
	max-width: 260px;
	width:40%;
	object-fit: cover;
    vertical-align:bottom;
}

.solution-title{
	position: relative;
	
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;		
	font-size: calc(20px + 10 * (100vw - 600px)/1200);
	
	line-height:2em;
	
	color:#555555;
	display: none;
}

.solution-english{
	position: absolute;
	top:65%;
	
	left: 50%;
    transform: translateX(-50%);
	
	font-size: calc(20px + 10 * (100vw - 600px)/1200);
	font-family: 'Cinzel', serif;
	font-weight: 600;
	line-height:1em;
	color:#777777;
}

.solution-list{
	position: relative;
	
	text-align: left;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
}

.solution-list div{
	position: relative;

	padding-top:0em;
	padding-bottom:3em;
	line-height:2em;
	
	padding-left:3em;
}

.solution-img{
	position: relative;

	width:100%;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:center;
  	-ms-flex-align:center;
  	align-items:center;
		
	flex-wrap:wrap;
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	color:#000000;
	
	overflow: hidden;
}

.solution-img img{
	position: relative;
	
	width: 100%;
	object-fit: cover;
}


/* ===========================================
	スマホ対応
=========================================== */

@media(max-width:1000px){
	
	.triangle1-2 {
		
		border-bottom: 460px solid #000000; 
		
	}
	
	
	#service-head{
		overflow: hidden;
		background-color:#000000; 
	}
	
	
	#service-head-title{
		
		height:auto;
	}
	
	#service-topmessage div{
		//max-width:24em;
	}
	
	.vital-wrapper{
		
		//margin-top:-8em;
	}
	
	.vital{
		max-width:800px;
	}
	
	.vital-content{
		flex-wrap: wrap;
		max-width:460px;
		
		max-height:1200px;
		min-height:360px;
		
		margin-left:0px;
		margin-right:0px;
	}
	
	.vital-img{
		max-height:280px;
		height:auto;
		width:100%;
		min-height:1px;
	}
	
	.vital-words{
		width:100%;
		height:auto;
		
		-webkit-justify-content:center;
		-ms-flex-justify-content:center;
		justify-content:center;
		
		padding: 2em;
	}
	
	#point-head{
		background-color:#000000;
	}

	#point-head-inner{
		overflow: hidden;
		
	}
	
	.service{
		padding-bottom:6em;
	}
	
	.solution-wrapper{
		
		//margin-top:-8em;
	}
	
	.solution{
		max-width:800px;
	}
	
	.solution-content{
		
		width:100%;

		margin-bottom:0em;
		
		margin-left:0px;
		margin-right:0px;
		max-width:460px;
	}
	
	.solution-img img{
		height:50vw;
		max-height:260px;
	}
	
	.solution-description{
		margin-top:-5.5em;
	}
	
	.solution-icon img{

		max-width: 160px;
		
	}
	
	#point-topmessage div{
		max-width:24em;
	}
}







/* ===========================================
	事例
=========================================== */


.project-wrapper{
	position:relative;
	
	text-align: center;
	width:100%;

	
	//background-color:#ffffff;
	background-color:#ECEEF5;
}

.project{
	position: relative;
	
	width: calc(100% - 20px);
	
	margin: 0 auto;
	
	padding-top:4em;
	padding-bottom:6em;	
	
	border-top: 0.5px solid #aaaaaa;
}

#project-title{
	position:absolute !important;
	top:0px;
	left:0px;
	color:#333333;

}

#project-top{
	position: relative;
	
	width: 100%;
	
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
	-webkit-box-align: center;
  	-ms-flex-align: center;
  	align-items: center;
  
	-webkit-justify-content: center;
  -ms-flex-justify-content: center;
  justify-content: center;
	
	color:#333333;
}

#project-head {
  	position: relative;
  
	width: 100%;
  
	padding-top:6em;
	padding-bottom:6em;
  
	//color: #eeeeee;
}

#project-head img{
	position: absolute;
	width:100%;
	min-width:1400px;
	object-fit: cover;
	
	opacity: 1;
}


#project-head h4{
	
	font-family: 'Noto Serif JP', serif;
	font-weight:700;
	
	font-size: calc(35px + 30 * (100vw - 600px)/1200);
	
	padding:0em 0 0em 0;
	margin:0;
	line-height:1.4;
}

#project-topmessage{
	position: relative;
	
	max-width:38em;
	padding-left:2em;
	padding-right:2em;
	
	margin:2em auto 0 auto;
	
	font-size: calc(14px + 6 * (100vw - 600px)/1200);
	line-height:2.5em;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
}

#project-bottom{
	position: relative;
	
	font-size: calc(12px + 5 * (100vw - 600px)/1200);
	
	max-width: 1620px;
	width: calc(100% - 30px);
	
	margin: 0 auto;
	padding-top:4em;
	padding-bottom:2em;
	
	background-color:#ffffff;
	
	border: 0.5px solid #bbbbbb;
}

.target-wrapper{
	position: relative;

}

.target{
	position:relative;
		
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	text-align:left;
	
	margin: 0 auto;

	padding-top:1em;
	padding-bottom: 1em;
	
	padding-left:15px;
	padding-right:15px;
	
	max-width: 1200px;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	flex-wrap: wrap;
		
	-webkit-justify-content:left;
	-ms-flex-justify-content:left;
	justify-content:left;
	
	//background-color:#ffffff;
}

.target > div{
	position: relative;
	
	padding-left:2em;
}

.target-img{
	position: absolute;
	top:0px;
	left:0px;
	text-align: center;
}

.target-img img{
	object-fit: cover;
	width:100%;
}

.target-img .mask {
	position:		absolute;
	width:			100%;
	height:			100%;
	top:			0;
	left:			0;
	//opacity:		0;	/* マスクを表示しない */
	
	background-color:	rgba(0,0,0,0.2);
}

.project-name{
	position: relative;
	width:100%;
	
	font-family: 'Noto Serif JP', serif;
	font-weight:700;
	
	font-size: calc(18px + 9 * (100vw - 600px)/1200);
	line-height:2.5;
	
	color:#333333;
	//color:#073E74;
}

.project-words{
	position: relative;
	width:100%;
	padding-top:0.5em;
	padding-bottom:0.5em;
	
	color:#333333;
}

.project-words div{
	max-width:30em;
	line-height:2;
}

.artwork-wrapper{
	position: relative;
	
	width:100%;
	//background-color:#ffffff;
}

.artwork{
	position: relative;
	width:100%;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
  	-webkit-box-align:flex-start;
  	-ms-flex-align:flex-start;
  	align-items:flex-start;	
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
	flex-wrap: wrap;
	
	padding-top:1em;
	padding-bottom:1em;
	
	max-width: 1200px;
	margin: 0 auto;
	//background-color:#ffffff;
}
	
.artwork-content{
	position: relative;
	
	margin-bottom:1em;
	text-align:center;
	
	width:calc(50% - 30px);
	
	padding-left:15px;
	padding-right:15px;
	
	padding-bottom: 2em;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	
	//background-color:#ffffff;
}
	
.artwork-content img{
	width:100%;
	max-width: 600px;
	object-fit: cover;
	border: 0.5px solid #666666;
}

.artwork-content p{
	margin: 0px;
	padding:0px;
	font-size: calc(10px + 2 * (100vw - 600px)/1200);
	color:#888888;
}


/* ===========================================
	スマホ対応
=========================================== */

@media(max-width:1200px){

	.project{
		width:100%;
	}
}
	
@media(max-width:800px){
	
	.project{
		
		//width:100%;
	}
	
	#project-bottom{
		width:100%;
		padding-bottom:10em;
		padding-left:0px;
		padding-right:0px;
	}

	.target-wrapper{
		background-color: #ffffff;
	}
	
	.target{
		max-width:600px;
	}
	
	.target > div{
		padding-left:1.5em;
	}
	
	.artwork{
		//padding-left:10px;
		//padding-right:10px;
	}
	
	.artwork-content{	
		width:calc(100% - 20px);
		padding-left:10px;
		padding-right:10px;
		padding-bottom:3em;
	}
	
	.artwork-content img{
		max-width: 600px;
	}
}


/* ===========================================
	新着コラム
=========================================== */

#latest-content-wrapper{
	position: relative;
	
	max-width:1920px;
	
	padding-left: 25px;
	padding-right: 25px;
	margin: 0 auto;
	
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex; /* 子要素をflexboxで揃える */
	
	-webkit-justify-content:center;
	-ms-flex-justify-content:center;
	justify-content:center;
	
}

.latest-content{
	position: relative;
	
	flex: 1; /* これが重要！ */
	max-width:360px;
	
	margin:15px;
	
	border: 0.5px solid #666666;
	box-sizing: border-box;
	
	background-color: #ffffff;
}


.latest-image{
	position: relative;
	
	text-align: center;
	
	overflow: hidden;
	height:220px;
	
	width:100%;
	
	border-bottom: 0.5px solid #666666;
}

.latest-image img{
	width:100%;
	min-height:220px;
	
	object-fit:cover;
	
	border-bottom: 1px solid #666666;
	
	transition: transform 0.3s ease;
}

.icatch{
	width:100%;
	min-height:220px;
	
	object-fit:cover;
	border-bottom: 0.5px solid #666666;
	
	transition: transform 0.3s ease;
}

.latest-image img:hover {
	transform: scale(1.1); /* 拡大 */
	filter: brightness(80%);
}

.latest-image div{
	position: absolute;
	
	top:0;
	left:0;
	
	padding-left:0.6em;
	padding-right:0.6em;
	height:2.2em;
	line-height: 2.2em;
	
	color:#ffffff;
	//background-color:#073E74;
	background-color:rgba(0,0,0,0.75);
	
	font-size: calc(12px + 1 * (100vw - 600px)/1200);

	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
}

.latest-words{
	position: relative;
	
	font-size: calc(12px + 2 * (100vw - 600px)/1200);
	color:#333333;
	line-height:2;
	
	background-color:#ffffff;
	
	padding-top:1.5em;
	padding-left:2em;
	padding-right:2em;
	width:100%;
	
	//height:600px;
	
	box-sizing: border-box;
	
}


.latest-words a:hover{
	color:#073E74;
}

.latest-date{
	position:relative;
	width:100%;
	
	font-family: 'Kanit', sans-serif;
	font-weight: 200;
	
	font-size: calc(12px + 6* (100vw - 600px)/1200);
		
	text-align: left;
	
	color:#666666;
}

.latest-title{
	position:relative;
	
	font-weight:500;
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-size: calc(16px + 4 * (100vw - 600px)/1200);
	
	line-height:1.5;
	text-align: left;
	width:100%;
}


.latest-discription{
	position:relative;
	width:100%;
	
	max-width:26em;
	
	line-height:2em;
	margin-top:1em;
	margin-bottom:2em;
	
	text-align: left;
}

.latest-tag{
	position: relative;
	
	font-size: calc(9px + 3 * (100vw - 600px)/1200);
	color:#666666;
	
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-weight:400;
	height:3em;
	line-height:3em;
	display: none;
}

.latest-tag span{
	padding-right:1em;
}

/* ===========================================
	スマホ対応
=========================================== */

@media(max-width:1200px){
	
	#latest-content-wrapper{
		flex-wrap:wrap;
	}
	
	.latest-content{
		
		flex:auto;
		width: calc(50% - 10px);
	}
	
	.latest-image img{
		
		height:23vw;
		max-height:250px;
		min-height:220px;
	}
}


@media(max-width:1000px){
	#latest-content-wrapper{
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.latest-content{
		margin-left:5px;
		margin-right:5px;
	}
}

@media(max-width:600px){
	
	.latest-content{
		max-width:600px;
		width: calc(100% - 10px); /* margin padding分を引く */
	}
	
	.latest-image{
		
		height:auto;
		max-height:280px;
	}
	.latest-image img{
		min-height:280px;
		height:inherit;
		max-height:1920px;
	}
}