@charset "utf-8";

/* kv
---------------------------------------------- */

#indexKv {
	margin-bottom:50px;
}

/* company
---------------------------------------------- */

#company {
	margin-bottom:60px;
	text-align:center;
}
#company h2 {
	position:relative;
	margin-left:1.5%;
	width:23%;
	aspect-ratio:1;
	float:left;
	background-color:#004B7C;
	color:#FFF;
	font-size:32px;
	line-height:1.3;
	border-radius:50%;
}
	@media(max-width:767px) {
		#company h2 {
			font-size:24px;
		}
	}
	@media(max-width:599px) {
		#company h2 {
			font-size:22px;
			margin-left:0;
		}
	}
	@media(max-width:479px) {
		#company h2 {
			width:150px;
			height:150px;
			float:none;
			margin:0 auto 1em auto;
		}
	}

#company h2 span {
	display:block;
	width:100%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}


#company ul {
	width:72%;
	float:right;
	margin-bottom:10px;
}
	@media(max-width:479px) {
		#company ul {
			width:100%;
			float:none;
		}
	}

#company ul li {
	text-align:left;
	margin-bottom:1em;
	position:relative;
}
#company ul li strong {
	float:left;
	display:inline-block;
	font-size:36px;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	color:#004B7C;
	width:62px;
	height:74px;
	line-height:74px;
	text-align:center;
	background:url(../images/bg_no.png) right bottom;
	background-size:cover;
}
	@media(max-width:767px) {
		#company ul li strong {
			width:50px;
			height:58px;
			line-height:58px;
		}
	}

#company ul li p {
	margin-left:72px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
	@media(max-width:767px) {
		#company ul li p {
			margin-left:60px;
		}
	}

#company > a {
	display:inline-block;
	background-image: linear-gradient(to bottom right,#004B7C 50%,#1A5D89 51%);
	color:#FFF;
	line-height:70px;
	font-size:22px;
	padding:0 70px;
}
	@media(max-width:767px) {
		#company > a {
			line-height:70px;
			font-size:18px;
			padding:0 60px;
		}
	}

#company > a:hover {
	opacity:0.8;
}
#company > a span {
	background:url(../shared/images/arrow.png) right center no-repeat;
	background-size:8px 16px;
	padding-right:21px;
}

/* work
---------------------------------------------- */

#work {
	margin-bottom:60px;
}
#work header {
	background-color:#004B7C;
	color:#FFF;
}
#work header h2 {
	display:inline-block;
	float:left;
	font-size:24px;
	line-height:60px;
	padding-left:25px;
}
	@media(max-width:767px) {
		#work header h2 {
			font-size:20px;
			line-height:50px;
			padding-left:15px;
		}
	}

#work header a {
	font-size:20px;
	display:inline-block;
	float:right;
	padding:0 40px;
	height:60px;
	line-height:60px;
	color:#FFF;
	background-image: linear-gradient(to bottom right,#004B7C 50%,#1A5D89 51%);
}
	@media(max-width:767px) {
		#work header a {
			font-size:16px;
			padding:0 25px;
			height:50px;
			line-height:50px;
		}
	}

#work header a:hover {
	opacity:0.8;
}

#work header a span {
	background:url(../shared/images/arrow.png) right center no-repeat;
	background-size:8px 16px;
	padding-right:21px;
}
#work ul {
	background-color:#E8EEF3;
	padding:3.5%;
}
	@media(max-width:767px) {
		#work ul {
			padding-bottom:0;
		}
	}

#work ul li {
	width:22%;
	float:left;
	margin-right:4%;
	font-size:20px;
}
	@media(max-width:767px) {
		#work ul li {
			width:48%;
			margin-right:4%;
			margin-bottom:25px;
			font-size:18px;
		}
		#work ul li:nth-child(2n) {
			margin-right:0;
		}
	}


#work ul li:last-child {
	margin-right:0;
}
#work ul li figure img {
	width:100%;
}
#work ul li figure figcaption {
	background-color:#10101C;
	color:#FFF;
	text-align:center;
	line-height:40px;
}

/* link
---------------------------------------------- */

#link {
	margin-bottom:90px;
}

#link ul li {
	width:48%;
	margin-right:4%;
	float:left;
}
#link ul li:last-child {
	margin-right:0;
}
#link ul li a:hover {
	opacity:0.8;
}
#link ul li img {
	width:100%;
}

/* map
---------------------------------------------- */

#map {
	margin:0 auto 15px auto;
}
#map > iframe {
	width:100%;
	height:320px;
}
	@media(max-width:767px) {
		#map > iframe {
			height:240px;
		}
	}

#address {
	margin-bottom:50px;
}








/* bento
---------------------------------------------- */
#bento {
	background:url(../images/bg.png) repeat-y;
	background-size:100% auto;
	position:relative;
	padding-bottom:80px;
}
	@media(max-width:767px) {
		#bento {
			position:static;
			padding-bottom:50px;
		}
	}

#bento > h2 {
	z-index:1;
	opacity:0;
	position:absolute;
	bottom:22%;
	left:5%;
	border-left:5px solid #D12E21;
	background-color:#FFF;
	padding:15px 20px;
	font-size:40px;
	line-height:1.4;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	font-weight:normal;
}
	@media(max-width:979px) {
		#bento > h2 {
			font-size:32px;
			padding:10px 15px;
		}
	}
	@media(max-width:767px) {
		#bento > h2 {
			position:static;
			margin-left:5%;
			font-size:20px;
			padding:10px 15px;
		}
	}

#bento > img {
	opacity:0;
	margin-left:22.5%;
	width:77.5%;
}
	@media(max-width:767px) {
		#bento > img {
			margin:0 0 0 5%;
			width:95%;
		}
	}



/* appetizer
---------------------------------------------- */
#appetizer {
	background:url(../images/bg.png) repeat-y;
	background-size:100% auto;
	position:relative;
	padding-bottom:80px;
}
	@media(max-width:767px) {
		#appetizer {
			position:static;
		}
	}

#appetizer > h2 {
	z-index:1;
	opacity:0;
	position:absolute;
	bottom:22%;
	right:5%;
	border-left:5px solid #D12E21;
	background-color:#FFF;
	padding:15px 20px;
	font-size:40px;
	line-height:1.4;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	font-weight:normal;
}
	@media(max-width:979px) {
		#appetizer > h2 {
			font-size:32px;
			padding:10px 15px;
		}
	}
	@media(max-width:767px) {
		#appetizer > h2 {
			position:static;
			margin-right:5%;
			font-size:20px;
			padding:10px 15px;
			border-left:none;
			border-right:5px solid #D12E21;
		}
	}

#appetizer > img {
	opacity:0;
	margin-right:22.5%;
	width:77.5%;
}
	@media(max-width:767px) {
		#appetizer > img {
			margin:0 5% 0 0;
			width:95%;
		}
	}


/* menu
---------------------------------------------- */
#menu {
	background-color:#D7CABD;
	padding:60px 5% 0 5%;
	margin-bottom:80px;
}
	@media(max-width:767px) {
		#menu {
			padding:40px 0 20px 0;
			margin-bottom:50px;
		}
	}

#menu > ul li {
	width:47%;
	float:left;
	text-align:center;
}
	@media(max-width:767px) {
		#menu > ul li {
			width:100%;
			max-width:300px;
			float:none;
			margin:0 auto;
		}
	}

#menu > ul li:nth-child(2n) {
	float:right;
}
	@media(max-width:767px) {
		#menu > ul li:nth-child(2n) {
			float:none;
		}
	}

#menu > ul li > p {
	display:inline-block;
	background:url(../images/messageLeft.png) no-repeat;
	background-size:auto 100%;
	padding-left:30px;
	margin-bottom:10px;
}
#menu > ul li > p > span {
	display:inline-block;
	background:url(../images/messageRight.png) right no-repeat;
	background-size:auto 100%;
	padding-right:30px;
}
#menu > ul li > a {
	display:block;
	font-size:24px;
	color:#FFF;
	width:100%;
	line-height:3;
	margin-bottom:70px;
}
	@media(max-width:767px) {
		#menu > ul li > a {
			font-size:20px;
			line-height:2.8;
			margin-bottom:25px;
		}
	}

#menu > ul li > a[href*="menu"] {
	background:url(../images/menu1.jpg) no-repeat;
	background-size:cover;
}
#menu > ul li > a[href*="about"] {
	background:url(../images/menu2.jpg) no-repeat;
	background-size:cover;
}
#menu > ul li > a[href*="access"] {
	background:url(../images/menu3.jpg) no-repeat;
	background-size:cover;
}
#menu > ul li > a[href*="voice"] {
	background:url(../images/menu4.jpg) no-repeat;
	background-size:cover;
}
#menu > ul li > a:hover {
	background-image:none;
	background-color:#D12E21;
}



/* facebook
---------------------------------------------- */
#facebook {
	margin:0 auto 75px auto;
	width:580px;
}
	@media(max-width:767px) {
		#facebook {
			width:auto;
			text-align:center;
		}
	}

#facebook > h2 {
	float:right;
	line-height:40px;
	border-top:5px solid #D12E21;
	writing-mode:vertical-rl;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	font-weight:normal;
	font-size:28px;
	padding-top:10px;
}
	@media(max-width:767px) {
		#facebook > h2 {
			float:none;
			line-height:1.3;
			border-top:none;
			writing-mode:horizontal-tb;
			font-size:20px;
		}
	}

#facebook > div {
	width:500px;
	border:10px solid #EBE3DD;
}
	@media(max-width:767px) {
		#facebook > div {
			display:inline-block;
			border:none;
			width:100%;
			max-width:500px;
		}
	}

#facebook div.fb-page {
}


/* corona
---------------------------------------------- */
#corona {
	text-align:center;
}
#corona > p {
	display:inline-block;
	margin:0 5% 80px 5%;
	color:#FFF;
	background-color:#333;
	padding:5px 20px;
	border-radius:25px;
}

	@media(max-width:767px) {
		#corona > p {
			font-size:14px;
			padding:5px 15px;
			line-height:1.3;
		}
	}




















#greeting {
	width:calc(100% - 30px);
	max-width:640px;
	margin:0 auto;
	margin-bottom:150px;
	padding:0 15px;
}
	@media(max-width:767px) {
		#greeting {
			margin-bottom:100px;
		}
	}

#greeting > figure {
	width:250px;
	margin:0 auto;
	margin-bottom:30px;
}
	@media(max-width:767px) {
		#greeting > figure {
			width:200px;
			margin-bottom:20px;
		}
	}

#greeting > figure > img {
	width:100%;
}
#greeting > p {
	line-height:1.8;
	margin-bottom:1em;
}
#greeting > span {
	display:block;
	text-align:right;
}



/* text
---------------------------------------------- */
.text {
	position:relative;
	margin-bottom:150px;
}
	@media(max-width:767px) {
		.text {
			margin-bottom:100px;
		}
	}

.text > figure {
	opacity:0;
	z-index:1;
	position:relative;
}
.text > figure > img {
	width:100%;
}

.text > h2 {
	opacity:0;
	z-index:2;
	position:absolute;
	writing-mode: vertical-rl;
	top:-1.5em;
	font-size:40px;
	font-feature-settings:initial;
	text-shadow:0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF;
}
	@media(max-width:639px) {
		.text > h2 {
			font-size:30px;
		}
	}
	@media(max-width:479px) {
		.text > h2 {
			font-size:24px;
		}
	}

.text > h2:first-letter {
	color:#FE4854;
	font-size:60px;
}
	@media(max-width:639px) {
		.text > h2:first-letter {
			font-size:45px;
		}
	}
	@media(max-width:479px) {
		.text > h2:first-letter {
			font-size:36px;
		}
	}

.text > div {
	opacity:0;
	position:relative;
	z-index:2;
	background-color:#FFF;
	margin-top:-150px;
	padding:3% 4%;
}
	@media(max-width:639px) {
		.text > div {
			margin-top:-50px;
		}
	}
	@media(max-width:479px) {
		.text > div {
			margin-top:-25px;
		}
	}

.text > div > h3 {
	font-size:24px;
	margin-bottom:10px;
	line-height:1.3;
}
	@media(max-width:639px) {
		.text > div > h3 {
			font-size:20px;
		}
	}

.text > div > p {
	line-height:1.8;
	margin-bottom:1em;
}

/* left */
.text_left > figure {
	margin-right:15%;
	z-index:1;
}
	@media(max-width:639px) {
		.text_left > figure {
			margin-right:10%;
		}
	}
	@media(max-width:479px) {
		.text_left > figure {
			margin-right:0%;
		}
	}

.text_left > div {
	margin-left:25%;
}
	@media(max-width:639px) {
		.text_left > div {
			margin-left:10%;
		}
	}
	@media(max-width:479px) {
		.text_left > div {
			margin-left:0;
		}
	}

.text_left > h2 {
	left:3%;
}

/* right */
.text_right > figure {
	margin-left:15%;
	z-index:1;
}
	@media(max-width:639px) {
		.text_right > figure {
			margin-left:10%;
		}
	}
	@media(max-width:479px) {
		.text_right > figure {
			margin-left:0;
		}
	}

.text_right > div {
	margin-right:25%;
}
	@media(max-width:639px) {
		.text_right > div {
			margin-right:10%;
		}
	}
	@media(max-width:479px) {
		.text_right > div {
			margin-right:0;
		}
	}

.text_right > h2 {
	right:3%;
}



/* facilities
---------------------------------------------- */
#facilities {
	position:relative;
	background-color:#F6F6F6;
	margin-bottom:150px;
	padding:0 15px 70px 15px;
}
	@media(max-width:767px) {
		#facilities {
			margin-bottom:100px;
		}
	}

#facilities > h2 {
	position:absolute;
	writing-mode: vertical-rl;
	top:-1em;
	right:3%;
	font-size:40px;
	font-feature-settings:initial;
}
	@media(max-width:639px) {
		#facilities > h2 {
			font-size:30px;
		}
	}

#facilities > div {
	width:100%;
	max-width:780px;
	margin:0 auto;
	padding-top:70px;
}
	@media(max-width:639px) {
		#facilities > div {
			padding-top:120px;
		}
	}

#facilities > div > h3 {
	font-size:32px;
	margin-bottom:15px;
}
	@media(max-width:639px) {
		#facilities > div > h3 {
			font-size:24px;
		}
	}

#facilities > div > h3 > img {
	width:200px;
	margin-right:30px;
}
	@media(max-width:639px) {
		#facilities > div > h3 > img {
			width:150px;
			margin-right:15px;
		}
	}

#facilities > div > figure {
	width:54%;
	float:left;
}
	@media(max-width:639px) {
		#facilities > div > figure {
			width:100%;
			float:none;
			margin-bottom:8px;
		}
	}

#facilities > div > figure > img {
	width:100%;
}
#facilities > div > div {
	width:42%;
	float:right;
}
	@media(max-width:639px) {
		#facilities > div > div {
			width:100%;
			float:none;
		}
	}

#facilities > div > div > p {
	line-height:2;
	margin-bottom:1em;
}
#facilities > div > div > a {
	margin:0 auto;
}



/* blog
---------------------------------------------- */
#blog {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#blog {
			margin-bottom:100px;
		}
	}

#blog > h2 {
	text-align:center;
	font-size:36px;
	font-feature-settings:initial;
	margin-bottom:20px;
}
	@media(max-width:639px) {
		#blog > h2 {
			font-size:24px;
			margin-bottom:10px;
		}
	}

#blog > h2:first-letter {
	color:#FE4854;
	font-size:48px;
}
	@media(max-width:639px) {
		#blog > h2:first-letter {
			font-size:32px;
		}
	}

#blog > ul {
	display:flex;
}
	@media(max-width:1279px) {
		#blog > ul {
			max-width:960px;
			margin:0 auto;
		}
	}

#blog > ul > li {
	width:calc(33.333% - 20px);
	background-color:#F6F6F6;
	margin:0 10px;
}
	@media(max-width:639px) {
		#blog > ul > li {
			width:calc(50% - 20px);
		}
	}

	@media(max-width:639px) {
		#blog > ul > li:last-child {
			display:none;
		}
	}

#blog > ul > li > a > figure {
	position:relative;
	width:50%;
	float:left;
}
	@media(max-width:1279px) {
		#blog > ul > li > a > figure {
			width:100%;
			float:none;
		}
	}

#blog > ul > li > a > figure > img {
	width:100%;
	height:auto;
}
#blog > ul > li > a > figure > span {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	background-color:#FE4854;
	color:#FFF;
	padding:5px;
}
#blog > ul > li > a > div {
	width:calc(50% - 20px);
	float:right;
	padding:10px;
}
	@media(max-width:1279px) {
		#blog > ul > li > a > div {
			width:calc(100% - 20px);
			float:none;
		}
	}

#blog > ul > li > a > div > span {
	display:block;
	color:#999999;
	margin-bottom:5px;
}
#blog > ul > li > a > div > p {
	line-height:1.3;
	margin-bottom:5px;
}
#blog > ul > li > a > div > strong {
	display:inline-block;
	border:1px solid #999;
	background-color:#FFF;
	padding:3px 5px;
}