@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ,button{border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
*{box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {
  line-height: 140% !important;
  font-weight: normal;
  font-family: 'mplus_round';
}
ol,ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
img{height: auto;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;position: relative;}
html {-webkit-text-size-adjust: 100%}
body{
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro"  ,"メイリオ" , Meiryo, "Meiryo UI" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 16px;
	line-height: 170%;
	color:#0b0b0b;
	-webkit-text-size-adjust:100%;
	background:#fff;
	font-weight: normal;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
@font-face{ 
	font-family: 'mplus_round';
	src: url('../font/MPLUSRounded1c-Regular.woff2') format('woff2'); 
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.web-font{font-family: 'mplus_round';}
@font-face{ 
	font-family: 'font-alpha';
	src: url('../font/rounded-l-mgenplus-1c-light.woff2') format('woff2'); 
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.font-alpha{
	font-family: 'font-alpha';
}
/* リンク設定
------------------------------------------------------------*/
a{
	margin:0;
	padding:0;
	text-decoration:none;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	font-size:100%;
	color:#0b0b0b;
	transition: .2s;
}
a:hover, a:active{
	-webkit-transition:opacity 1s;
	-moz-transition:opacity 1s;
	-o-transition:opacity 1s; 
	outline: none;
	color:#ccc;
	transition: .2s;
}
a.post-link{text-decoration: underline;}
/* フォーム
------------------------------------------------------------*/
.button{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'mplus_round';
	background:#fff;
	border-radius:30px;
	border: 1px solid #0b0b0b;
	color:#0b0b0b;
	padding:0 15px;
	font-weight: normal !important;
	font-size: 14px;
	min-width: 150px;
	min-height: 60px;
	width: 260px;
	text-decoration: none !important;
	cursor: pointer;
	transition: .2s;
}
.button-pink{
	background: #ea4a96;
	border: 1px solid #ea4a96;
	color: #fff;
}
.button:after{
	content: "";
	display: block;
	background: url(../images/arrow.png) no-repeat center top;
	background-size: 100% 100%;
	width: 7px;
	height: 12px;
	position: absolute;
	right: 10px;
	margin: auto;
	top: 0;
	bottom: 0;
}
.button-pink:after{
	background: url(../images/arrow-circle-white.png) no-repeat center top;
	background-size: 100% 100%;
	width: 16px;
	height: 16px;
}
.button-center{margin: 0 auto;}
.button:hover{
	text-decoration: none;
	transition: .2s;
	background: #dbdbdb;
	border-color: #dbdbdb;
	color:#0b0b0b;
}
.button-pink:hover{
	background: #ffe8f3;
	border-color: #ffe8f3;
}
.button:active {box-shadow: none !important;}
.link-a{
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
/* 共通レイアウト
------------------------------------------------------------*/
#overlay{
	width: 100%;
	overflow-x: hidden !important;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
#header {
	width: 100%;
	position: relative;
	z-index: 1000;
	border-bottom: 4px solid #f8f8f8;
}
.wrapper{
	margin:0 auto;
	width:1140px;
	position: relative;
}
.wrapper700{
	margin:0 auto;
	max-width:700px;
	width: 100%;
	position: relative;
}
.wrapper900{
	margin:0 auto;
	max-width:900px;
	width: 100%;
	position: relative;
}
.cont-box{
	margin: 0 auto 50px auto;
	display: block;
	padding: 1px;
}
.flex-area{
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.flex-area-left{
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
.flex-area-center{
	display: flex;
	justify-content:center;
	align-items: center;
}
.sec-wrapper{
	width: 100%;
	position: relative;
	padding: 70px 0 150px;
}
.secbox-wide{
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	min-width: 1140px;
}
.back-yellow{
	background: #fffde7;
}
.back-gray{
	background: #f8f8f8;
}
.back-blue{
	background: #eff8fb;
}
.back-pink{
	background: #ea4a96;
}
.back-l-pink{
	background: #fff5fa;
}
.back-white{
	background: #fff;
}
.has-inner-box{
	padding:10px;
	position: relative;
}
.padding10{padding: 10px;}
.padding5{padding: 5px;}
.spacer{display: block;}
.spacer15{height: 15px;}
.spacer25{height: 25px;}
.spacer50{height: 50px;}
.spacer100{height: 100px;}
.spacer200{height: 200px;}
.column-box{
	display: flex;
	justify-content: center;
	align-content: center;
}
.column-box .text-area{
	flex: 2
}
.column-box .photo-area{
	position: relative;
}
.column-box .photo-area img{
	max-width: 100%;
}
.column-right .photo-area{
	order: 2;
	flex-shrink: 0;
	margin-left: 60px;
}
.column-right .text-area{order: 1;}
.column-left .photo-area{
	flex-shrink: 0;
	margin-right: 60px;
	order: 1;
}
.column-left .text-area{order: 2;}
.absolute-img{
	display: block;
	position: absolute;	
}
/**animate***/
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
@keyframes fadeIn {
  0% {
	opacity: 0
  }
  to {
	opacity: 1
  }
}
@-webkit-keyframes fadeIn {
  0% {
	opacity: 0
  }
  to {
	opacity: 1
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 2s;
}
/* タイポグラフィ
------------------------------------------------------------*/
h2{font-size:30px;}
h2.title{
	margin:30px auto 20px auto;
	background: url(../images/line-h2.png) no-repeat left bottom;
	background-size: auto 10px;
	margin: 0 auto 30px;
	text-align: left;
	padding-bottom: 18px;
	font-size: 40px;
}
h2.title.center{
	background: url(../images/line-h2.png) no-repeat center bottom;
	background-size: auto 10px;
	text-align: center;
}
h3{
	margin-bottom: 30px;
	font-size: 24px;
}
h3.title .text{
	background: linear-gradient(transparent 60%, #e8f6fa 40%);
	padding-bottom: 5px;
}
.back-blue h3.title .text{
	background: linear-gradient(transparent 70%, #c3ebf6 30%);
	padding-bottom: 0;
}
h4{font-size: 20px;}
h4.title{
	margin:15px 0 10px;
	padding:15px 0;
	font-size:20px;
	position: relative;
}

p{padding-bottom: 15px;}
.post,.article-box{
	margin: 0 auto 25px;
	max-width: 1140px;
}
.article-box .post{margin: 0;}
.article-box{padding: 20px 30px 25px;}
table{
	width: 100%;
	box-sizing:border-box;
	border-collapse: separate;
	border-spacing: 2px;
}

table thead th{

}
table td{
	background: #fff;
	vertical-align: middle;
	font-size: 15px;
	line-height: 140%;
	padding:20px 20px 20px 25px;
	border-bottom: 1px solid #e5dfd6;
}
table tbody th{
	background:#faf5ce;
	position: relative;
	font-size: 16px;
	line-height: 140%;
	width: 25%;
	min-width: 250px;
	padding: 20px 10px 20px 60px;
	font-family: 'mplus_round';
	min-height: 52px;
	border-bottom:1px solid #e5dfd6;
}
table th .text {position: relative;}
table th .text:before {
	content: "";
	position: absolute;
	display: block;
	background: url(../images/icon-th.png) no-repeat center top;
	background-size: 100% auto;
	width: 42px;
	height: 32px;
	left: -44px;
	top: -7px;
}
table tr:last-child th,
table tr:last-child td{
	border-bottom: none;
}
.post ul,
ul.ul-pink{
	margin-bottom: 30px;
	font-family: 'mplus_round';
	font-size: 1.1em;
}

.post ul li,
ul.ul-pink li{
	position: relative;
	padding: 0 0 12px 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.post ul li .text,
ul.ul-pink li .text{
	flex: 2;
}
.post ul li:before,
ul.ul-pink li:before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	flex-shrink: 0;
	top: 8px;
	position: relative;
	background: url(../images/icon-list.png) no-repeat center top;
	background-size: 100% auto;
}
ol{
  counter-reset:list;
  list-style-type:none;
  margin-bottom: 30px;
  font-family: 'mplus_round';
  font-size: 1.1em;
}
ol li{
  position:relative;
  padding: 0 0 13px 25px;
  transition: 0.3s;
}
ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 26px;
  font-size: 16px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background: #e2f77f;
  border-radius: 100%;
  top: 1px;
}
ol  ol li:before{content: none;}
.icon-flex{margin-right: 5px;}
.photo-white{
	border: #fff solid 10px;
	display: block;
}
.photo-blue{
	border: #e8f6fa solid 10px;
	display: block;
}
.photo-thin{border-width: 5px;}
.circle-photo{
	border-radius: 100% !important;
	display: block;
}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.relative{position: relative;}
.bold{font-weight: bold;}
.button-area{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.button-area .button:first-child{
	margin: 0 30px 0 0;
}
.font-min{
	font-size: 0.8em;
	line-height: 130%;
}
.font18{font-size: 18px !important;line-height: 1em;}
.font20{font-size: 20px !important;line-height: 1em;}
.font24{font-size: 24px !important;line-height: 1em;}
.font30{font-size: 30px !important;line-height: 1em;}
.font40{font-size: 40px !important;line-height: 1em;}
.font60{font-size: 60px !important;line-height: 1em;}
br.br1140,br.br789,br.br589,br.br489,br.br389{display: none !important;}
/* ---       ヘッダー
----------------------------------------------------------------------*/
#header-inner{
	padding: 25px 12px 25px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#site-description {
	font-size: 13px !important;
}
#site-description .min{
	padding: 0 0 0 20px;
}
.en-page #site-description a,
.en-page #site-description a span{
	display: block;
}
.en-page #site-description a span.min{padding: 0;}
#pcnav-contact{
	width: 160px;
	height: 44px;
	margin: 0 15px;
	min-height: 30px;
}
#pcnav-contact:after {
	width: 10px;
	height: 10px;
}
.translation{
	position: relative;
	width: 92px;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}
.translation-box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
}
.trans-pop-box{
	display: none;
	transition: .2s;	
	
	cursor: pointer;
	background: #e8f6fa;
	top: 100%;
	left: -5px;
	padding: 3px 10px;
	position: absolute;
}
.translation.open .trans-pop-box{
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
}
.translation:hover .trans-pop-box:hover{
	background: #b9d458;
	opacity: 1;
	color: #fff;
}
.translation .flag{
	margin-right: 6px;
}
.translation .arrow-under{margin: 0 0 0 4px;}

/* メインメニュー　PC用
--------------------------------------------*/
@media only screen and (min-width:1141px){
	nav#global-nav{
		z-index: 1000;
		flex: 2;
	}
	#sp-nav,
	#spnav-sns{display: none;}
	#nav-toggle {
		display: none;
		position: absolute;
		right: 12px;
		top: 14px;
		width: 34px;
		height: 36px;
		cursor: pointer;
		z-index: 101;
	}
	#nav-toggle div {position: relative;}
	nav#global-nav ul{
		margin: 0px auto;
		align-items:stretch;
		padding: 5px 0 5px 2px;
	}
	nav#global-nav ul li{
		text-align: center;
		line-height: 130%;
		display: block;
		position: relative;
		transition: .2s;
		font-size: 14px;
		margin: 0 18px;
	}
	nav#global-nav ul li a{
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav#global-nav ul li a span{
		position: relative;
		z-index: 100;
		white-space: nowrap;
	}
	nav#global-nav ul li.current a:before,
	nav#global-nav ul li:hover a:before{
		content: "";
		display: block;
		background: #fdf7bc;
		width: 36px;
		height: 36px;
		border-radius: 100%;
		position: absolute;
		z-index: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
}
/*********************トップページ*************************/
/*--------------メインイメージ--------------*/
#mainimage{
	position: relative;
	z-index: 1;
	height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;
}
#mainimage .inner{
	max-width: 1140px;
	width: 90%;
}
#mainimage .text-area{
	position: relative;
	z-index: 100;
	width: 610px;
}
#main-chatch{
	background: rgba(255, 255, 255, 0.5);
	padding: 15px;
	margin: 0 0 50px;
}
#main-chatch .inner{
	border: 5px solid rgba(255, 255, 255, 0.6);
	width: 100%;
	padding: 30px 15px;
}
#main-chatch h2{
	font-size: 90px;
	line-height: 150% !important;
}
#mainimage .text-area h3{
	margin: 0 0 20px 0;
}
#mainimage .text-area h3 .text1{
	padding: 0 30px 0 0;
}
.en-page #mainimage .text-area h3 span{
	display: block;
}

#mainimage .mainimage-img{
	position: absolute;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
}

#mainimage .sp-img{display: none;}
/*****紹介*******/
#top-sec1 .photo-area{
	width: 48%;
}
#top-sec1 .photo1{
	width: 100%;
}
#top-sec1 .photo2{
	bottom: -25px;
	right: -50px;
	border-radius: 100%;
}
#top-sec1 h3{margin-bottom: 0;}

/*****TEDx*******/
#YouTube-area iframe{
	margin: 0 auto 12px;
	display: block;
	border-radius: 6px;
	height: 100%;
	aspect-ratio: 16 / 9 !important;
}
#YouTube-area .youtube-link{
	font-size: 14px;
}
/*****サービス******/
.service-box{
	margin-bottom: 100px;
}
.service-box .photo-area{
	max-width: 550px;
}
.service-box .photo-area img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	aspect-ratio: 7 / 5;
	object-position: left center;
}

/*****メッセージ*****/
#top-sec4 p.web-font{
	line-height: 150%;
}
#top-sec4-3{
	padding: 60px 20px 40px;
}
/*****映画情報*****/
#top-sec5 .titlle-area{
	margin: 0 auto 30px;
}
#top-sec5 h2.title{
	margin: 0;
}
#top-sec5 .button-sp{display: none;}
/*****映画コラム*****/
#top-column-area{
	flex-wrap: wrap;
	align-items: stretch;
}
#top-column-area .post-box{
	width: 48.5%;
	margin: 0 0 30px;
	padding: 30px 30px 30px 35px;
	border: 5px solid #fefce5;
}
#top-column-area .post-box h3{
	margin: 0;
}
#news-area .inner{
	align-items: stretch;
}
#news-area .left{
	margin: 0 100px 0 0;
	position: relative;
}
#news-area .left .button{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 220px;
	height: 50px;
	font-size: 13px;
	min-height: 50px;
}
#news-area .button-sp{display: none;}
/*****記事一覧***/
.article-wrap{
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.post-box{
	position: relative;
	width: 31%;
	margin: 0 1% 20px;
	padding: 15px 15px 50px;
	transition: .2s;
}
.news-box{
	
}
.post-box:hover{
	opacity: 0.6;
	transition: .2s;
}
.post-box .thum{
	width: 100%;
	object-fit: cover;
	aspect-ratio:4/3;
	display: block;
	margin: 0 auto 20px;
}
.post-box .date,
.news-box .date{
	font-size: 13px;
	line-height: 1em;
}
.post-box h3,
.news-box h3{
	font-size: 17px !important;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0;
}
.post-box h3:before,
.news-box h3:before{
	content: "";
	display: block;
	background: url(../images/arrow-circle-gray.png) no-repeat center top;
	background-size: 100% 100%;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0 6px 0 0;
	position: relative;
	top: 3px;
}
.post-box.back-gray h3:before{
	background: url(../images/arrow-circle-white.png) no-repeat center top;
	background-size: 100% 100%;
}
.news-box{
	position: relative;
	border-bottom: 1px solid #c1c1c1;
	padding: 30px 20px;
	transition: .2s;
}
.news-box:hover{
	transition: .2s;
	opacity: 0.6;
}
.news-box h3{
	font-size: 16px !important;
	margin: 0 0 0 25px;
}
.news-box p{
	padding: 0;
}
.news-box .news-cat{
	font-size: 13px;
	width: 110px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff494;
	margin: 0 25px 0 0;
}
/*     footer
------------------------------------------------------------*/
#footer-contact{
	padding-bottom: 60px;
}
#footer-contact h3{
	font-size: 16px !important;
	text-align: center;
}
#footer-contact .inner{
	padding: 50px 100px;
	align-items: flex-start;
}
#footer-contact .button{
	width: 400px;
	height: 80px;
	font-size: 20px;
	border-radius: 40px;
	margin: 0 0 0 50px;
	flex-shrink: 0;
}
#footer-contact .button:hover img{
	opacity: 0.6;
}
#footer-contact .button-pink:after {
	background: url(../images/arrow-white.png) no-repeat center top;
	background-size: 100% 100%;
	width: 10px;
	height: 16px;
	
}
#footer-middle{
	font-size: 14px;
	padding: 50px 20px 30px;
}
#footer-middle p{padding-bottom: 0;}
#footer-sitename{
	font-size: 16px !important;
}
#footer-middle #footer-nav{
	font-size: 14px;
}
#footer-middle #footer-nav:before{
	content: "";
	display: block;
	background: url(../images/arrow-circle-gray.png) no-repeat center top;
	background-size: 100% 100%;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	margin: 0 6px 0 0;
	position: relative;
}
#footer-translation{
	margin: 20px auto 0;
	justify-content: center;
}
#footer-bottom{
	padding: 30px 0 0;
}
.sns-area{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.sns-area li{
	margin: 0 15px;
}
.sns-area a:hover{
	opacity: 0.6;
}
#copyright{
	padding: 20px 0 5px;
	font-size: 13px;
}
/*--------------------　　ページ共通　------------------------------*/
#page-title{
	height: 220px;
	margin-bottom:100px;
	background: #e2f77f;
	display: flex;
	justify-content: center;
	align-items: center;
}
#page-title:after{
	content: "";
	display: block;
	background: url(../images/pagetitle-light.png) no-repeat left top;
	background-size:100% 100%;
	width: 70%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}
#page-title-line{
	position: relative;
	border: 5px solid rgba(255, 255, 255, 0.5);
	height: 140px;
	min-width: 480px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px 30px;
	margin: 0 auto;
	z-index: 100;
}
#page-title-line h1{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 34px;
}
#page-title-line h1:before{
	content: "";
	display: inline-block;
	background: url(../images/icon-blog.png) no-repeat center top;
	background-size:100% auto;
	width: 43px;
	height: 36px;
	flex-shrink: 0;
	margin: 0 6px 0 0;
}

#pagetop{
	position: fixed;
	right: 20px;
	bottom: 10px;
	z-index: 900;
	
}
#pagetop.active a{display: flex;}
#pagetop a{
	font-size: 16px;
	opacity: 0.6;
	background: #b9d458;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	position: relative;
	justify-content: center;
	align-items: center;
}


/*************************ページナビ*************************/
#page-nav .button{
	width: 240px;
	height: 50px;
	min-height: 40px;
	margin: 0 15px;
}
#page-nav .button:after {
	background: url(../images/arrow-bottom.png) no-repeat center top;
	background-size: 100% 100%;
	width: 12px;
	height: 7px;
}
/*************************プロフィール************************/
#profile-lead{
	padding: 0;
}
#profile-area h2.title .min{
	font-size: 16px;
	line-height: 1em;
	display: inline-block;
}
#profile-list{
	padding: 35px 30px 5px 35px;
}
#profile-list ul{
	font-size: 1em;
}
#portfolios-lead{
	margin: 0;
}
.portfolio-box{
	border-bottom: 1px solid #bad55a;
	padding: 50px 0;
	align-items: flex-start;
}
.portfolio-box .photo-area{
	width: 50%;
	max-width: 600px;
}
.portfolio-box .photo-area img{
	width: 100%;
	height: auto;
	object-fit: cover;
	width: 100%;
	height: 100%;
	aspect-ratio:5/4;
}
.portfolio-box .text-area{
	padding-top: 50px;
}
.portfolio-box h3{
	margin: 0 0 10px;
}
.portfolio-box h2 {
	margin: 0 0 45px;
}
.portfolio-box h2 .text{
	background: linear-gradient(transparent 60%, #fff494 40%);
}
.portfolio-box .button{
	margin-top: 30px;
}
.portfolio-half-area .portfolio-box{
	width: 45%;
	margin: 0 2.5%;
	border:none;
}
.portfolio-half-area .portfolio-box .photo-area{
	width: 100%;
	margin: 0 auto 20px;
}
.portfolio-half-area .portfolio-box h2{
	font-size: 24px;
	margin: 0 0 25px;
}
.portfolio-half-area .portfolio-box .text-area{padding-top: 0;}
#portfolio-box-tedx{
	position: relative;
	z-index: 2000;
}
#pop-action{
	background: #82d5ec;
}
#popup-area{
	display: none;
	transition: opacity 0.3s ease;
	cursor: pointer;
	background: #e2f77f;
	top: 100%;
	left: -5px;
	padding:50px 10px;
	position: fixed !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 20000;
	margin: auto;
	overflow: scroll;
}
#pop-action.open #popup-area{
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
}
#popup-area .post{
	background: #fff;
	padding: 35px 50px 30px;
	position: relative;
	margin: 0 auto;
	/* overflow: scroll-y !important; */
}
#popup-area .post h2 .text{background: none !important;}
#popup-area .close-button{
	position: absolute;
	right:-20px;
	top: -20px;
	background: #ddd;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#popup-area .close-button2{
	position: initial;
	background: none;
	text-align: center;
	text-decoration: underline;
	margin: 0 auto;
}



/*************************コラム************************/
#news-area h2.title{
	font-size: 30px !important;
}
.post-box.back-blue h3:before{
	background: url(../images/arrow-circle-white.png) no-repeat center top;
	background-size: 100% 100%;
}
#column-top .article-wrap {
	margin-left: -2%;
	margin-right: -2%;
}
#column-top .post-box{
	margin-bottom: 30px;
}
#column-post #page-title{
	min-height: 300px;
}
#column-post #page-title-line{
	min-height: 215px;
	padding: 45px 30px 40px;
	max-width: 60%;
}
#column-post #page-title #title-sub{
	font-size: 20px !important;
	padding: 0 0 10px;
}
#column-post #page-title-line h1{
	font-size: 28px !important;
	line-height: 130% !important;
	text-align: center;
	display: block;
	padding: 0 0 5px;
}
#column-post #page-title-line h1:before{
	content: none !important;
}
#column-post #page-title-line .date{
	text-align: center;
	padding: 0;
}
#column-post #article-area{
	padding-top: 0;
}
.post{
	max-width: 900px;
}
.post .news-cat{
	font-size: 14px;
	line-height: 1em;
	background: #fff494;
	margin: 0 0 30px;
	text-align: right;
	padding: 8px 40px;
	display: inline-block;
}
#post-main{
	margin: 0 auto 50px;
	width: 100%;
}
#post-main img{
	display: block;
	width: 100%;
	height: auto;
}
.post h2.title{
	font-size: 30px !important;
	margin-top: 30px;
}
.post h3.title{
	margin-top: 30px;
}
.post .column-box{
	margin: 0 auto 50px;
}
.post .column-box .photo-area{
	width: 48%;
}
.post .column-box .photo-area img{
	width: 100%;
	height: auto;
}
.post .column-left .photo-area {
	margin-right: 30px;
}
.post .column-right .photo-area {
	margin-left: 30px;
}
.post .column-box .text-area h2.title{
	font-size: 28px;
}
.coution-box{
	margin: 0 auto 50px;
	padding: 30px 35px 50px;
}
.youtube-box{
	margin: 0 auto 50px;
}
.youtube-box iframe{
	width: 100%;
	aspect-ratio: 16 / 9 !important;
	height: 100%;
}
.media-link-box{
	padding: 40px 30px;
}
.media-link-box .photo-area{
	width: 45%;
}
.media-link-box .photo-area img{
	width: 100%;
}
.media-link-box h3.title .text {
	background: linear-gradient(transparent 60%, #fff 40%);
}

.post .button-area{
	justify-content: center;
}
.post .button-area .button{
	margin: 0 15px;
}
#recommend-area{
	padding: 40px 20px 30px;
	margin: 0 auto 100px;
}
#recommend-area h2.title{
	font-size: 30px !important;
	left: 20px;
	position: relative;
}
#recommend-area .article-wrap{
	flex-wrap: wrap;
}
.button-back{
	margin:50px auto 50px;
	background: #dbdbdb;
	border-color: #dbdbdb;
}
.button-back:hover{
	margin:0 auto 50px;
	background: #eeeeee;
	border-color: #dbdbdb;
}




@media only screen and (max-width:1200px){
	.secbox-wide{min-width: initial;}
	.secbox-wide,
	.wrapper{
		width:94%;
	}
	
	#site-description a{
		flex-wrap: wrap;
	}
	#site-description .font30{
		order: 2;
	}
	#site-description .min{
		order: 1;
		padding: 0;
		font-size: 11px;
		width: 100%;
	}





}
/* iPadサイズ以下（1140px）からアコーディオンメニュー
------------------------------------------------------------*/
@media only screen and (max-width:1140px){
	br.br1140{display: inline !important;}
	.font18{font-size: 18px !important;}
	.font20{font-size: 20px !important;}
	h3,
	.font24{font-size: 24px !important;}
	h2,
	.font30{font-size: 30px !important;}
	h2.title,
	.font40{font-size: 36px !important;}
	.font60{font-size: 52px !important;}

	.spacer15{height: 15px;}
	.spacer25{height: 25px;}
	.spacer50{height: 30px;}
	.spacer100{height: 100px;}
	.spacer200{height: 200px;}


	.secbox-wide,
	.wrapper{
		width:90%;
	}
	
	.is-fixed{border: none;}
	.height100{background:#e8f6fa;}
	
	#header-inner {
		padding: 18px 8px 16px 25px;
	}
	#site-description{width: 70%;}
	#site-description .font30,
	#site-description .min{
		width: 100%;
		
	}
	
	
	
	#header .pnav ul,
	#global-nav ul#pc-nav,
	#pcnav-contact,
	#header-translation{
		display:none;
	}

	/****nav***/
	
	#global-nav{
		width:100%;
		position: absolute;
		top: 0;left: 0;right: 0;
		margin: auto;
		z-index: 1000;
		height: auto;
		text-align: right;
	}
	.height100{height: 100% !important;}
	#nav-toggle{
		position: absolute;
		top:16px;
		right:14px;
		width:125px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .2s;
		background:#fff;
		border-radius: 30px;
		color: #0b0b0b;
		border: 1px solid #0b0b0b;
		z-index: 1000;
		font-size: 15px;
	}
	.open #nav-toggle{
		transition: .2s;
		background: #dbdbdb;
		border-color: #dbdbdb;
		color: #0b0b0b;
	}
	#nav-toggle div{width: 20px;position: relative;height: 50%;margin: 0 3px;}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 1px;
		width: 100%;
		background:#0b0b0b;
		left: 0;
		-webkit-transition: 0.35s ease-in-out;
		-moz-transition: 0.35s ease-in-out;
		transition: 0.35s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {top: 0;}
	#nav-toggle span:nth-child(2) {top: 11px;}
	#nav-toggle span:nth-child(3) {top: 22px;}
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
		background: #0b0b0b;
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
		background:#0b0b0b;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
		background:#0b0b0b;
	}
	#nav-toggle p{
		padding: 0 0 0 7px;
	}
	
	#global-nav.open{
		height: 100vh !important;
		z-index:999;
	}
	#panel.none{display: none;}
	#panel {
		display: none;
		height: 0;
		width: 90%;
		
		position: absolute;
		background: #fff;
		border: 4px solid #d8f2fa;
		top: 75px;
		overflow-x: hidden !important;
		overflow-y: scroll !important;
		
		max-height: calc(100vh - 100px);
		height: 90vh;
		width:90%;
		margin: 0 auto;
		left: 0;right: 0;
	}
	.open #panel{
		height: auto;
		display: block;
	}
	#sp-nav{
		display:block;
		position: relative;
		padding: 35px 50px 50px;
	}
	#sp-nav ul{
		margin: 0 auto 40px;
	}
	#sp-nav li{
		text-align: left;
		border-bottom: 1px solid #c1c1c1;
	}
	#sp-nav li a{ 
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20px 10px;
	}
	#sp-nav li a:before {
		content: "";
		display: block;
		background: url(../images/arrow-circle-gray.png) no-repeat center top;
		background-size: 100% 100%;
		width: 14px;
		height: 14px;
		flex-shrink: 0;
		margin: 0 6px 0 0;
		position: relative;

	}
	#sp-contact-button{
		margin: 0 auto 30px;
		font-size: 16px;
		width: 300px;
	}
	#spnav-translation{
		margin: 0 auto;
	}
	#spnav-sns{
		background: #82d5ec;
		display: flex;
		padding: 20px;
	}
	
	
	.column-box{display: block;}
	.column-box .photo-area{margin: 0 auto;}
	.column-box .text-area {
		margin: 0 auto;
		padding-top: 30px;
	}


	/********トップページ********/
	#mainimage{
		height: 650px;
	}
	#mainimage > .inner {
		width: 92%;
	}
	#mainimage .mainimage-img {
		object-position: 62% center;
	}
	#mainimage .text-area {
		width: 480px;
	}
	#main-chatch h2 {
		font-size: 70px !important;
	}
	
	#top-sec1 .photo2 {
		width: 200px;
		bottom: -14px;
		right: -60px;
	}
	#top-sec1 .text-area{
		max-width: 800px;
	}
	#YouTube-area iframe{
		width: 90%;
	}
	#top-sec2-2 .photo-white{
		width: 300px;
		margin: 0 auto;
	}
	#top-sec2-2 .text-area{
		max-width: 800px;
	}
	.service-box{
		max-width: 600px;
		margin: 0 auto;
	}
	.service-box .photo-blue{
		width: 400px;
		margin: 0 auto;
	}
	.service-box h3.font30{
		font-size: 24px !important;
	}
	
	#top-sec4 .photo1{
		width: 100%;
	}
	#top-sec4 .photo2{
		width:400px;
		margin: 0 auto 30px;
	}
	#top-sec4 .text-area{
		max-width: 800px;
	}
	#top-sec4 h3.title .text br{display: none;}
	#top-sec5 .secbox-wide{
		width: 96%;
		
	}
	#news-area .inner{
		display: flex;
	}
	#news-area .left {
		margin: 0 50px 0 0;
	}
	.column-box .text-area {
		padding-top: 0;
	}
	.news-box {
		flex-wrap: wrap;
	}
	.news-box h3 {
		margin: 0;
		width: 100%;
		font-size: 15px !important;
		padding: 12px 0 0 0;
	}
	.news-box .news-cat {
		font-size: 11px;
		width: auto;
		height: auto;
		margin: 0 18px 0 0;
		padding: 6px 20px;
		line-height: 1em;
	}

	#footer-contact .inner {
		padding: 50px 80px;
		display: block;
	}
	#footer-contact .button {
		margin: 0 auto;
	}

	/**********下層ページ共通**********/
	.post,.article-box{margin: 0 20px 25px;}
	.article-box {padding: 10px 20px 15px;}
	/**********プロフィール*********/
	#profile-area{padding-top: 0;}
	#profile-area .photo-area{
		max-width: 340px;
		width: 60%;
	}
	#profile-area .text-area,
	.portfolio-box .text-area{
		max-width: 800px;
	}
	.portfolio-box .photo-area {
		margin: 0 auto 20px;
		width: 70%;
		max-width: 480px;
	}
	
	/**********コラム**********/
	#news-area h2.title {
		font-size: 26px !important;
	}
	#column-post #page-title{
		margin-bottom: 50px;
	}
	#column-post #page-title-line {
		max-width: 80%;
	}
	#column-post #page-title #title-sub {
		font-size: 17px !important;
	}
	#column-post #page-title #title-sub .icon-flex{
		width: 24px;
		height: auto;
	}
	.post .column-box .photo-area{
		display: block;
		margin: 0 auto 15px;
	}
	.post .column-box .photo-area {
		display: block;
		margin: 0 auto 15px;
		max-width: 400px;
		width: 90%;
	}
	.media-link-box {
		display: flex !important;
		font-size: 14px;
		line-height: 140%;
	}
	.media-link-box h3.title{
		font-size: 20px !important;
	}
	.media-link-box .photo-area {
		width: 45% !important;
		margin: 0 30px 0 0 !important;
	}
	#recommend-area h2.title {
		font-size: 28px !important;
		margin-bottom: 16px;
		left: 15px;
	}
	#recommend-area .article-wrap{
		display: block;
		background: #fff;
	}
	#recommend-area .post-box {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0;
		background: none;
		padding: 10px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#recommend-area .post-box .thum {
		width: 40%;
		max-width: 280px;
		margin: 0 30px 0 0;
		flex-shrink: 0;
	}
	

}
@media only screen and (max-width: 986px){
	#page-nav .button {
		width: 200px;
		height: 50px;
		min-height: 40px;
		margin: 0 8px;
		font-size: 13px;
	}
	#column-top .post-box {
		width: 46%;
		margin: 0 2% 35px;
		padding: 15px 15px 50px;
	}

}
@media only screen and (max-width: 789px){
	br.br789{display: inline !important;}
	br.br1140{display: inline !important;}
	.font18{font-size: 17px !important;}
	.font20{font-size: 18px !important;}
	h3,
	.font24{font-size: 22px !important;}
	h2,
	.font30{font-size: 28px !important;}
	h2.title,
	.font40{font-size: 32px !important;}
	.font60{font-size: 50px !important;}
	
	.spacer15{height: 15px;}
	.spacer25{height: 25px;}
	.spacer50{height: 30px;}
	.spacer100{height: 100px;}
	.spacer200{height: 200px;}
	.button{
		padding: 0 15px;
		font-size: 14px;
		min-width: 150px;
		min-height: 50px;
		width: 240px;
	}
	.sec-wrapper {
		padding: 60px 0 100px;
	}

	#sp-nav {
		padding: 25px 35px 45px;
	}
	.photo-blue,
	.photo-white{
		border-width: 6px;
	}
	
	/********トップページ********/
	#top #header{
		border: none;
	}
	#mainimage {
		height: 550px;
		margin-top: 75px;
	}
	#mainimage > .inner,
	#mainimage .text-area {
		width: 100%;
		height: 100%;
	}
	#main-chatch {
		text-align: left;
		background: none;
		padding: 0;
		margin: 0;
		position: absolute;
		top: -50px;
		left: 4%;
	}
	#main-chatch .inner {
		border: none;
		width: 100%;
		padding: 0;
		display: block;
	}
	#main-chatch h2 {
		line-height: 120% !important;
	}
	#main-chatch-bottom{
		position: absolute;
		bottom: 60px;
		left: 4%;
	}
	#mainimage .text-area h3 {
		margin: 0 0 10px 0;
		display: block;
		text-align: left;
	}
	#mainimage .text-area h3 span,
	#main-name h2 span{
		display: block;
		line-height: 130%;
	}
	#main-name h2{
		display: block;
		text-align: left;
	}
	#mainimage .mainimage-img {
		object-position: 77% center;
	}
	#top-sec1 .photo-area {
		width: 300px;
	}
	#top-sec1 .photo2 {
		width: 160px;
	}
	#YouTube-area .youtube-link {
		font-size: 12px;
	}
	#YouTube-area .youtube-link .icon-flex{
		width: 30px;
		height: auto;
	}
	#top-sec2-2 .photo-white {
		width: 280px;
	}
	
	#top-sec5 .button-pc,
	#news-area .button-pc{
		display: none;
	}
	#top-sec5 .button-sp,
	#news-area .button-sp{
		display: flex;
	}
	#top-column-area{
		display: block;
		background: #fff;
		padding: 35px 15px;
	}
	#top-column-area .post-box {
		width: 100%;
		margin: 0 auto;
		padding: 25px 10px;
		border: solid 1px #c1c1c1;
		border-width: 0 0 1px 0;
		background: none;
	}
	#news-area .inner{
		display: block;
	}
	#news-area .left {
		margin: 0 auto;
	}
	#news-area h3.title{
		text-align: center;
	}
	#news-area .column-box .text-area{
		margin: 0 auto 30px;
	}
	
	.article-wrap{
		display: block;
		padding: 35px 10px;
	}
	.post-box {
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px;
	}
	.post-box h3, .news-box h3 {
		font-size: 15px !important;
	}
	.post-box h3:before, 
	.news-box h3:before {
		width: 14px;
		height: 14px;
	}
	.post-box .date{
		padding-bottom: 10px;
	}
	#footer-contact .button {
		width: 340px;
		height: 70px;
		font-size: 17px;
	}
	#footer-contact .button .icon-flex{
		width: 34px;
		height: auto;
	}

	#pagetop {
		right: 11px;
	}
	#pagetop a {
		font-size: 14px;
		width: 50px;
		height: 50px;
	}
	/**********下層ページ共通**********/
	#page-title {
		margin-bottom: 70px;
	}
	#page-title-line h1 {
		font-size: 30px;
	}
	#page-title-line h1:before {
		width: 36px;
		height: 32px;
	}
	/**********プロフィール*********/
	
	
	
	
	/**********コラム**********/
	#column-top .article-wrap{
		display: flex;
		margin-left: -5%;
		margin-right: -5%;
		padding-top: 0;
	}
	#column-post #page-title {
		min-height: 170px;
		padding: 30px 0;
		height: auto;
	}
	#column-post #page-title-line {
		min-height: 180px;
		padding: 30px 25px 22px;
		max-width: 90%;
	}
	#column-post #page-title-line h1 {
		font-size: 24px !important;
	}
	
	.post .news-cat {
		font-size: 12px;
		line-height: 1em;
		margin: 0 0 20px;
		padding: 6px 30px;
	}
	.post h2.title {
		font-size: 26px !important;
	}
	
	
	
	.media-link-box {
		display: block !important;
	}
	.media-link-box .photo-area {
		width: 80% !important;
		margin: 0 auto 15px !important;
		max-width: 300px !important;
	}
	
	#recommend-area .article-wrap {
		padding: 10px;
	}
	
	
}
@media only screen and (max-width: 589px){
	body{
		font-size: 15px;
	}
	br.br589{display: inline !important;}
	br.br789{display: inline !important;}
	br.br1140{display: inline !important;}
	.font18{font-size: 17px !important;}
	.font20{font-size: 17px !important;}
	h3,
	.font24{font-size: 20px !important;}
	h2,
	.font30{font-size: 24px !important;}
	h2.title,
	.font40{font-size: 30px !important;}
	.font60{font-size: 50px !important;}
	
	h2.title {
		margin: 0 auto 22px;
	}	
	.spacer15{height: 15px;}
	.spacer25{height: 25px;}
	.spacer50{height: 30px;}
	.spacer100{height: 100px;}
	.spacer200{height: 200px;}


	.button{
		font-size: 13px;
	}
	.button-area{
		display: block;
	}
	.button-area .button{
		margin: 0 0 20px !important;
	}
	#nav-toggle {
		width: 110px;
		top: 12px;
		right: 9px;
		font-size: 14px;
		text-align: center;
		padding-left: 2px;
	}
	#nav-toggle div {
		width: 14px;
		height: 32%;
	}
	.open #nav-toggle span:nth-child(1),.open #nav-toggle span:nth-child(3) {top: 8px;}
	#nav-toggle span:nth-child(2) {top: 48%;}
	#nav-toggle span:nth-child(3) {top: auto;bottom: 0;}
	#nav-button-area a {padding: 0;}
	#panel{
		width: 96%;
		height: calc(100% - 150px);
		top:70px;
	}


	/********トップページ********/
	#mainimage {
		height: 500px;
	}
	#main-name{
		display: block;
		text-align: left;
	}
	#main-name .font-alpha{
		line-height: 110%;
		padding: 0 0 10px;
	}
	#YouTube-area .youtube-link {
		font-size: 12px;
		display: block;
		line-height: 120%;
		text-align: center;
	}
	#YouTube-area .youtube-link .icon-flex {
		display: block;
		margin: 0 auto 3px;
	}
	#top-sec2-2 .photo-white {
		width: 240px;
	}
	#top-sec4 .photo2 {
		width: 320px;
	}
	#top-sec4-3 {
		padding: 30px 25px 32px;
	}
	#top-sec4-3 h2.title{
		display: block;
		text-align: center;
	}
	#top-sec4-3 h2.title .icon-flex{
		display: block;
		margin: 0 auto;
	}
	#top-sec4-3 p{
		text-align: left;
	}
	#top-sec4-3 p br{display: none;}
	#top-sec5 .secbox-wide {
		width: 92%;
	}
	#footer-contact h3 {
		font-size: 15px !important;
	}
	#footer-contact .inner {
		padding: 35px 30px;
		font-size: 14px;
		line-height: 140%;
	}
	#footer-middle {
		font-size: 13px;
		padding: 45px 20px 22px;
	}
	#footer-sitename {
		font-size: 15px !important;
	}
	/****下層ページ共通****/
	#page-title {
		height: 190px;
		margin-bottom: 40px;
	}
	#page-title-line {
		position: relative;
		border-width: 4px ;
		height: 125px;
		width: 80%;
		min-width: 300px;
		padding: 10px 20px;
	}
	#page-title-line h1 {
		font-size: 26px;
	}
	#page-nav .button {
		width: 30%;
		height: 45px;
		min-height: 40px;
		margin: 0 1%;
		font-size: 11px;
		line-height: 130%;
		text-align: center;
		min-width: 50px;
	}
	/**********プロフィール*********/
	
	.portfolio-box .photo-area {
		width: 90%;
	}
	.portfolio-box h3 {
		margin: 0 0 10px;
		line-height: 1em !important;
	}
	.portfolio-box h2 {
		margin: 0 0 20px;
		line-height: 120% !important;
	}
	.portfolio-box .button {
		margin-top: 20px;
	}
	.portfolio-half-area{
		display: block;
	}
	.portfolio-half-area .portfolio-box {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #bad55a;
	}
	.portfolio-half-area .portfolio-box .box-upper{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 0 20px;
	}
	.portfolio-half-area .portfolio-box .photo-area{
		width: 45%;
		margin: 0 20px 0 0;
		flex-shrink: 0;
	}
	.portfolio-half-area .portfolio-box .right{
		padding: 20px 0 0 0;
	}
	.portfolio-half-area .portfolio-box h3{
		margin: 0 0 5px;
	}
	.portfolio-half-area .portfolio-box h3 .font18{
		font-size: 15px !important;
	}
	#popup-area .post {
		padding: 18px 30px 30px;
	}
	#popup-area .close-button {
		right: -10px;
		top: -10px;
		width: 60px;
		height: 60px;
	}
	
	
	/**********コラム**********/
	#column-top .article-wrap {
		display: block;
		margin: 0 auto;
	}
	#column-top .post-box {
		width: 100%;
		margin: 0 auto 30px;
		padding: 15px 15px 40px;
	}
	
	#column-post #page-title-line {
		padding: 25px 25px 17px;
		width: 90%;
		height: auto;
	}
	#column-post #page-title #title-sub {
		font-size: 15px !important;
	}
	#column-post #page-title-line .date {
		font-size: 14px;
	}
	#column-post #page-title-line h1 {
		font-size: 22px !important;
	}
	.post h2.title {
		font-size: 24px !important;
	}
	#recommend-area {
		padding: 30px 12px 15px;
		margin: 0 auto 60px;
	}
	#recommend-area .post-box{
		align-items: flex-start;
	}
	#recommend-area h2.title {
		font-size: 24px !important;
		background-size: auto 7px;
		padding-bottom: 14px;
		margin-bottom: 16px;
		left: 15px;
	}
	#recommend-area .article-wrap {
		padding: 3px;
	}
	#recommend-area .post-box .thum {
		margin: 0 20px 0 0;
	}
	#recommend-area .post-box .date{
		font-size: 12px;
		padding: 10px 0 5px;
	}
	#recommend-area .post-box h3 {
		font-size: 13px !important;
	}
	


}
@media only screen and (max-width: 489px){
	br.br489{display: inline !important;}
	br.br589{display: inline !important;}
	br.br789{display: inline !important;}
	br.br1140{display: inline !important;}
	.font18{font-size: 17px !important;}
	.font20{font-size: 17px !important;}
	h3,
	.font24{font-size: 20px !important;}
	h2,
	.font30{font-size: 24px !important;}
	h2.title,
	.font40{font-size: 30px !important;}
	.font60{font-size: 50px !important;}
	
	h2.title {
		margin: 0 auto 22px;
	}	
	.spacer15{height: 15px;}
	.spacer25{height: 25px;}
	.spacer50{height: 30px;}
	.spacer100{height: 100px;}
	.spacer200{height: 200px;}

	#header-inner {
		padding: 16px 8px 15px 15px;
	}
	#nav-toggle {
		top: 12px;
		width: 90px;
		height: 46px;
	}
	#sp-nav li a {
		padding: 17px 7px;
		font-size: 14px;
	}
	
	/********トップページ********/
	#main-chatch h2 {
		font-size: 60px !important;
	}
	#mainimage .text-area h3 span,
	#main-name h2 span {
		line-height: 140%;
	}
	#mainimage .text-area h3 {
		font-size: 17px !important;
	}
	#main-name .font30{
		font-size: 22px !important;
	}
	#mainimage .sp-img{
		display: block;
	}
	#mainimage .pc-img{
		display: none;
	}
	.service-box .photo-blue {
		width: 100%;
		margin: 0 auto;
	}
	.service-box {
		width: 100%;
	}
	#top-sec4 .photo1 {
		width: 100%;
		object-fit: cover;
		width: 100%;
		height: 100%;
		aspect-ratio: 4 / 3;
	}
	#top-sec4 .photo2 {
		width: 80%;
	}
	#footer-contact h3 {
		font-size: 14px !important;
		margin: 0 auto 15px;
	}
	#footer-contact .button {
		width: 100%;
		height: 64px;
		font-size: 16px;
		max-width: 300px;
	}
	#footer-bottom {
		padding: 20px 0 0;
	}
	#footer-middle {
		font-size: 12px;
		padding: 40px 15px 15px;
	}
	.sns-area li img{
		width: auto !important;
		height: 30px;
		display: block;
	}
	#footer-middle #footer-nav {
		font-size: 13px;
	}
	#copyright {
		padding: 15px 0 5px;
		font-size: 12px;
	}
	/****下層ページ共通****/
	.article-wrap {
		display: block;
		padding: 0;
	}
	#page-title {
		height: 170px;
	}
	#page-title-line {
		border-width: 3px;
		height: 115px;
	}
	#page-title-line h1 {
		font-size: 24px;
		display: block;
	}
	#page-title-line h1:before {
		width: 30px;
		height: 26px;
		display: block;
		margin: 0 auto 2px;
	}
	#page-nav .button {
		width: 28%;
		height: 40px;
		min-height: 40px;
		margin: 0 1%;
		font-size: 10px;
	}
	/**********プロフィール*********/
	
	#profile-area h2.title .min {
		font-size: 14px;
	}
	
	#profile-list {
		padding: 25px 15px 5px 22px;
	}
	.portfolio-half-area .portfolio-box h3 .font18 {
		font-size: 13px !important;
	}
	.portfolio-half-area .portfolio-box h2 {
		margin: 0;
	}
	.portfolio-half-area .portfolio-box h2 .font24 {
		font-size: 18px !important;
		line-height: 120% !important;
	}
	#popup-area{
		padding: 20px 18px 30px;
	}
	

	/**********コラム**********/
	#news-area h2.title {
		font-size: 24px !important;
	}
	#column-post #page-title {
		padding: 20px 0;
	}
	#column-post #page-title-line {
		padding: 20px 18px 11px;
	}
	#column-post #page-title #title-sub {
		font-size: 13px !important;
	}
	#column-post #page-title #title-sub .icon-flex {
		width: 20px;
	}
	#column-post #page-title-line .date {
		font-size: 12px;
	}
	#column-post #page-title-line h1 {
		font-size: 20px !important;
	}
	.post{
		margin: 0;
	}
	#post-main ,
	.post .column-box{
		margin: 0 auto 30px;
	}
	ul.ul-pink,
	.post ul,
	ol{
		font-size: 1.05em;
		width: 96%;
		margin:0 auto 30px;
	}
	ol li {
		padding: 0 0 13px 19px;
	}
	ol li:before {
		left: -8px;
		width: 20px;
		font-size: 14px;
		height: 20px;
		line-height: 20px;
		top: 3px;
	}
	ul.ul-pink li:before,
	.post ul li:before {
		width: 8px;
		height: 8px;
		top: 8px;
	}
	.coution-box {
		margin: 0 auto 30px;
		padding: 20px 24px 45px;
	}
	
	
	
	
	
	

}
@media only screen and (max-width: 389px){
	br.br389{display: inline !important;}
	.spacer100 {
		height: 70px;
	}
	#nav-toggle {
		top: 16px;
		width: 84px;
		height: 47px;
	}
	.open #nav-toggle span:nth-child(1),
	.open #nav-toggle span:nth-child(3) {
		top: 6px;
	}
	#panel{width: 98%;}
	#sp-nav {
		padding: 20px 20px 35px;
	}
	#sp-contact-button {
		font-size: 15px;
		width: 100%;
	}


	/********トップページ********/
	#mainimage {
		margin-top: 58px;
	}
	#main-chatch {
		top: -33px;
	}
	#main-chatch h2 {
		font-size: 54px !important;
	}
	#main-name .font-alpha {
		padding: 0;
	}
	#main-chatch-bottom {
		bottom: 40px;
	}
	#top-sec1 .photo-area {
		width: 80%;
	}
	#top-sec1 h3 {
		font-size: 15px !important;
		padding: 0 0 18px 0;
	}
	#top-sec1 h2.title .font20{
		display: block;
		font-size: 15px !important;
	}
	.service-box h3.font30 {
		font-size: 22px !important;
	}
	#top-sec4-3 h2.title span{
		line-height: 140%;
		display: block;
	}
	#top-sec4-3 h2.title .icon-flex {
		margin: 0 auto 4px;
		width: 36px;
	}
	

	/****下層ページ共通****/
	/**********プロフィール*********/
	.portfolio-half-area .portfolio-box .right {
		padding: 0;
	}
	
	

	/**********コラム**********/
	#column-post #page-title-line {
		padding: 20px 14px 11px;
	}
	
	.post h2.title {
		font-size: 22px !important;
	}
	.post h3.title {
		font-size: 19px !important;
	}
	.post h3.title .text {
		padding-bottom: 2px;
	}
	.media-link-box {
		padding: 26px 20px 40px;
	}
	.media-link-box .photo-area {
		width: 96% !important;
	}
	#recommend-area {
		padding: 26px 6px 7px;
		margin: 0 auto 50px;
	}
	#recommend-area h2.title {
		font-size: 21px !important;
		background-size: auto 7px;
		padding-bottom: 12px;
		margin-bottom: 16px;
		left: 7px;
	}
	#recommend-area .post-box .thum {
		margin: 0 14px 0 0;
	}
	#recommend-area .post-box .date {
		font-size: 11px;
	}
	#recommend-area .post-box h3 {
		font-size: 12px !important;
	}
	#recommend-area .post-box h3:before {
		width: 12px;
		height: 12px;
	}

}