@charset "utf-8";

html {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', Verdana, sans-serif;
	background: #fff;
	font-size: 62.5%;
}
body {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', Verdana, sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	word-break: normal;
	-webkit-text-size-adjust: 100%;
}

a, a:link {
	color: #0000DE;
}
a:visited {
	color: #941D55;
}
a:active,
a:hover {
	color: #CC0000;
}
a:focus {
	color: #CC0000;
}
/* FireFox link-line hide */
a:link,
a:visited,
a:active,
a:hover { 
	overflow: hidden;
	outline: none;
}


/** common style **/
a {
	display: block;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	backface-visibility: hidden; 
	-webkit-backface-visibility: hidden;
}
a:hover {
	opacity: 0.6;
}

*, *:before, *:after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	-webkit-backface-visibility : hidden;
}

ul {
	list-style: none;
}

#info-group #present-oa-box #pre-call h4 a {
	cursor: default !important;
}


/*** ソーシャルボタン ***/
#sns-block {
	width: 100%;
	background: #fff;
	padding-bottom: .75em;
}
.sns {
	width: 96%;
	padding-top: .75em;
	margin: 0 auto;
	text-align: center;
}
.ttl-sns {
	display: inline-block;
	vertical-align: top;
	margin-right: 1em;
	color: #000;
	font-size: .9em;
}
.ttl-sns i {
	padding-right: .1em;
}
.sns-list {
	display: inline-block;
}
.sns-list li {
	display: inline-block;
	position: relative;
}
.sns-list li img {
	width: 42px;
	height: auto;
	vertical-align: middle;
}
@media screen and (min-width: 40em) {
	.sns {
		width: 960px;
	}
	.sns-list li img {
		width: 26px;
		height: auto;
		vertical-align: middle;
	}
}
@media screen and (min-width: 64em) {
}

.clearfix:after {
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	content: ".";
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}


/** base **/
.tree #content {
	background: #f9ff01;
}

.section-box {
	width: 100%;
	background: #fff;
	text-align: center;
}
.section-box:nth-child(even) {
	background: #f9ff01;
}
.section-box .inner {
	margin: 0 auto;
}

@media only screen and (max-width: 640px) {
	#global-nav:nth-of-type(1) {
		display: none;
	}
	
	#container {
		width: 100%;
	}
	#container-inner {
	}
	#content {
		width: 100%;
	}
	#content-inner {
	}
	
	.sp-hide {
		display: none;
	}
	
	/* pageup */
	.pageup {
	}
	.pageup a {
		display: block;
		background: url(../images/btn-pageup.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		width: 54px;
		height: 54px;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		position: fixed;
		right: 20px;
		bottom: 20px;
	}
}

@media print, screen and (min-width: 641px) {
	body {
		min-width: 980px !important;
	}

	#container {
		width: 100%;
	}
	#container-inner {
	}
	#content {
		width: 100%;
	}
	#content-inner {
	}
	
	.pc-hide {
		display: none;
	}

	/* PCの電話番号リンクを無効化 */
	a[href^="tel:"] { cursor: default; }

	/* pageup */
	.pageup {
	}
	.pageup a {
		display: block;
		background: url(../images/btn-pageup.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 60px;
		height: 60px;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		position: fixed;
		right: 20px;
		bottom: 20px;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	.pageup a:hover {
		opacity: 0.6;
	}
}

/*** CONTENTS ***/
#content #block02 p,
#content #block03 p {
	display: none;
	overflow: hidden;
	height: 0px;
}

@media screen and (max-width: 640px) {
	#block01 {
		padding: 17.2% 0;
	}
	#block01 .inner {
		width: 94%;
	}
	#block02 {
		padding: 17.2% 0 19.6%;
	}
	#block02 .inner {
		width: 80%;
	}
	#block03 {
		padding: 9.6% 0;
	}
	#block03 .inner {
		width: 90%;
	}

	#block01 h2 {
		margin: 0 auto 6.4%;
	}
	#block01 p {
		font-size: 1.6rem;
		font-size: 3.6vw;
		line-height: 2.4;
	}

	/* column-list */
	#column-group {
		background: url(../images/bg.png) repeat center top;
	}
	#column-group > .inner {
		width: 94%;
		padding: 0 0 15.6%;
		margin: 0 auto;
	}

	#column-group .column-list {
		background: url(../images/column-line-sp.png) no-repeat center bottom;
	}
	#column-group .column-list > .inner {
		padding: 15.6% 0 5.4%;
	}
	#column-group .column-list h2 {
		width: 96.6667%;
		margin: 0 0 9.6%;
	}

	#column-group .column-list li {
		width: 100%;
		background: #fff;
		margin: 0 auto 5.4%;
	}
	#column-group .column-list li a {
		font-size: 1.2rem;
		line-height: 1.8;
		color: #000;
		padding: 5.4%;

		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		justify-content: space-between;
	}
	#column-group .column-list li a figure {
		flex-basis: 28%;
	}
	#column-group .column-list li a h3 {
		flex-basis: 68%;
	}
}

@media screen and (min-width: 641px) {
	#block01 {
		padding: 112px 0;
	}
	#block02 {
		padding: 126px 0 150px;
	}
	#block03 {
		padding: 98px 0 86px;
	}

	#block01 h2 {
		margin: 0 auto 40px;
	}
	#block01 p {
		font-size: 1.8rem;
		line-height: 2.4;
	}

	/* column-list */
	#column-group {
		background: url(../images/bg.png) repeat center top;
	}
	#column-group > .inner {
		width: 940px;
		padding: 0 0 84px;
		margin: 0 auto;
	}

	#column-group .column-list {
		background: url(../images/column-line-pc.png) no-repeat center bottom;
	}
	#column-group .column-list > .inner {
		padding: 70px 0 30px;
	}
	#column-group .column-list:not(:first-child) > .inner {
		padding: 90px 0 30px;
	}
	#column-group .column-list h2 {
		margin: 0 0 50px 6px;
	}

	#column-group .column-list ul {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	#column-group .column-list li {
		width: 460px;
		background: #fff;
		margin: 0 20px 20px 0;
	}
	#column-group .column-list li:nth-child(even) {
		margin: 0 0 20px;
	}
	#column-group .column-list li a {
		line-height: 1.8;
		color: #000;
		padding: 12px;

		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		justify-content: space-between;
	}
	#column-group .column-list li a:hover {
		opacity: 1.0;
		background: rgba(249,255,1,.3);
		text-decoration: none;
	}
	#column-group .column-list li a figure {
		flex-basis: 28%;
	}
	#column-group .column-list li a h3 {
		flex-basis: 68%;
	}
}


/* info-group */
#info-group #present-box p {
	display: none;
	overflow: hidden;
	height: 0px;
}

@media screen and (max-width: 640px) {
	#info-group {
		background: url(../images/bg.png) repeat center top;
	}
	#info-group > .inner {
	}
	#info-group #present-box {
		width: 86%;
		padding: 7.2% 0 9.6%;
		margin: 0 auto;
	}
	#info-group #present-box h2 {
		display: block;
		background: url(../images/present.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 68.18182% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	#info-group #present-oa-box {
		width: 78.125%;
		padding: 9.6% 0 15.6%;
		margin: 0 auto;
	}
	#info-group #present-oa-box h2 {
		display: block;
		background: url(../images/present-oa.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 53.8% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 auto 4.8%;
	}
	#info-group #present-oa-box h5 {
		background: #ff0000;
		font-size: 4.6vw;
		line-height: 1.0;
		color: #fff;
		text-align: center;
		padding: 2.6% 0 2.4%;
		margin: 0 auto 5.4%;
	}
	#info-group #present-oa-box h3 {
		font-size: 4.0vw;
		line-height: 1.0;
		color: #ff0000;
		text-align: center;
		margin: 0 auto 7.2%;
	}
	#info-group #present-oa-box #pre-call {
		text-align: center;
		margin: 0 auto 9.6%;
	}
	#info-group #present-oa-box #pre-call h4 {
		background: #fff;
		font-size: 8.4vw;
		line-height: 1.4;
		border: 4px solid #000;
	}
	#info-group #present-oa-box #pre-call h4:first-child {
		margin: 0 auto 6.4%;
	}
	#info-group #present-oa-box #pre-call h4 span {
		font-size: 5.8vw;
		color:  #ff0000;
	}
	#info-group #present-oa-box #pre-call h4 a {
		color:  #000;
		text-decoration: none;
		padding: 3.2% 0 3.8%;
	}
	#info-group #present-oa-box #pre-call h4 a:hover {
		opacity: 1.0;
	}
	#info-group #present-oa-box #pre-caution {
		display: block;
		text-align: center;
		margin: 0 auto 9.6%;
	}
	#info-group #present-oa-box #pre-caution p {
		display: inline-block;
		line-height: 1.7;
		text-align: left;
		padding-left: 1.4em;
	}
	#info-group #present-oa-box #pre-caution p span {
	}
	#info-group #present-oa-box #pre-caution p span:before {
		content: '※';
		margin: 0 0.4em 0 -1.4em;
	}
	#info-group #present-oa-box #pre-web a {
		display: block;
		background: #f9ff01;
		font-size: 3.8vw;
		line-height: 1.0;
		font-weight: bold;
		color: #000;
		text-decoration: none;
		text-align: center;
		padding: 5.4% 0 6.0%;
	}
}

@media screen and (min-width: 641px) {
	#info-group {
		background: url(../images/bg.png) repeat center top;
	}
	#info-group > .inner {
		width: 860px;
		margin: 0 auto;
	}
	#info-group #present-box {
		padding: 32px 0 58px;
	}
	#info-group #present-box h2 {
		display: block;
		background: url(../images/present.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 550px;
		height: 375px;
		margin: 0 auto;
	}

	#info-group #present-oa-box {
		padding: 42px 0 100px;
	}
	#info-group #present-oa-box h2 {
		display: block;
		background: url(../images/present-oa.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 500px;
		height: 269px;
		margin: 0 auto 24px;
	}
	#info-group #present-oa-box #present-head {
		text-align: center;
	}
	#info-group #present-oa-box #present-head h5 {
		display: inline-block;
		background: #ff0000;
		font-size: 3.2rem;
		line-height: 1.0;
		color: #fff;
		text-align: center;
		padding: 10px 0;
		margin: 0 auto 28px;
	}
	#info-group #present-oa-box h3 {
		font-size: 3.0rem;
		line-height: 1.0;
		color: #ff0000;
		text-align: center;
		margin: 0 auto 32px;
	}
	#info-group #present-oa-box #pre-call {
		text-align: center;
		margin: 0 auto 32px;

		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		justify-content: space-between;
	}
	#info-group #present-oa-box #pre-call h4 {
		flex-basis: 420px;
		max-width: 420px;
		line-height: 1.5;
		background: #fff;
		font-size: 5.2rem;
		border: 4px solid #000;
		padding: 20px 0 24px;
	}
	#info-group #present-oa-box #pre-call h4 span {
		font-size: 3.6rem;
		color:  #ff0000;
	}
	#info-group #present-oa-box #pre-call h4 a {
		color:  #000;
		text-decoration: none;
	}
	#info-group #present-oa-box #pre-call h4 a:hover {
		opacity: 1.0;
	}
	#info-group #present-oa-box #pre-caution {
		display: block;
		text-align: center;
		margin: 0 auto 36px;
	}
	#info-group #present-oa-box #pre-caution p {
		display: inline-block;
		line-height: 1.7;
		text-align: left;
	}
	#info-group #present-oa-box #pre-caution p span:before {
		content: '※';
		margin: 0 0.4em 0 0;
	}
	#info-group #present-oa-box #pre-web a {
		display: block;
		width: 580px;
		background: #f9ff01;
		font-size: 2.4rem;
		line-height: 1.0;
		font-weight: bold;
		color: #000;
		text-decoration: none;
		text-align: center;
		border: 3px solid #f9ff01;
		padding: 26px 0 28px;
		margin: 0 auto;
	}
	#info-group #present-oa-box #pre-web a:hover {
		opacity: 1.0;
		text-decoration: underline;
		border: 3px solid #000;
	}
}


/** movie-box **/
@media screen and (max-width: 640px) {
	#home .movie-box {
		width: 100%;
		padding: 9.6% 0 3.6%;
		margin: 0 auto;
	}
	.tree .movie-box {
		width: 100%;
		margin: 0 auto 7.2%;
	}
	#home .movie-box-inner {
		width: 94%;
	}
	.movie-box-inner {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.movie-box iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}	

@media screen and (min-width: 641px) {
	#home .movie-box {
		width: 100%;
		background: #fff;
		padding: 64px 0 24px;
		margin: 0 auto;
	}
	.tree .movie-box {
		width: 100%;
		background: #fff;
		margin: 0 auto 32px;
	}
	#home .movie-box-inner {
		width: 860px;
		margin: 0 auto;
	}
	.tree .movie-box-inner {
		width: 820px;
		margin: 0 auto;
	}
	#home .movie-box iframe {
		width: 860px !important;
		height: 484px !important;
	}
	.tree .movie-box iframe {
		width: 820px !important;
		height: 462px !important;
	}
}


/** column-box **/
.tree p.writer {
	text-align: right;
}

@media screen and (max-width: 640px) {
	.tree .column-box {
		padding: 7.2% 0 16.8%;
	}
	.tree .column-box-inner {
		width: 94%;
		background: #fff;
		padding: 7.2% 5.0%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto;
	}
	.tree .column-box h2#column-head {
		width: 72%;
		margin: 0 auto 7.2%;
	}
	.tree .column-box h3 {
		font-size: 2.4rem;
		line-height: 1.4;
		padding: 0 0 0 0.8em;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto 0.8em;
		position: relative;
	}
	.tree .column-box h3:after {
		content:"";
		height: 100%;
		outline: 2px solid #000;
		position: absolute;
		top: 1px;
		left: 0;
	}
	#column01.tree .column-box h3:after {
		border-left: 3px solid #6ccffc;
	}
	#column02.tree .column-box h3:after {
		border-left: 3px solid #ffc600;
	}
	#column03.tree .column-box h3:after {
		border-left: 3px solid #a1ed00;
	}
	.tree .column-box .column-pic {
		text-align: center;
		margin: 0 auto 1.2em;
	}
	.tree .column-box .column-pic figure {
		margin: 0 0 0.2em;
	}
	.tree .column-box .column-pic .caption {
		font-size: 1.4rem;
	}
	.tree .column-box .column-block {
		margin: 0 auto 1.4em;
	}
	.tree .column-box .column-block h4 {
		font-size: 1.8rem;
		line-height: 1.4;
		border-bottom: 2px solid #000;
		padding: 0 0 0.3em 0.3em;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto 0.8em;
	}
	.tree .column-box .column-block p {
		line-height: 2.0;
	}
	.tree .column-box .column-block p.bottom-space,
	#column01.tree .column-box .column-block p {
		margin: 0 0 1.2em;
	}
}

@media screen and (min-width: 641px) {
	.tree .column-box {
		padding: 48px 0 86px;
	}
	.tree .column-box-inner {
		width: 940px;
		background: #fff;
		padding: 40px 60px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto;
	}
	.tree .column-box h2#column-head {
		width: 542px;
		margin: 0 auto 40px;
	}
	.tree .column-box h3 {
		font-size: 3.6rem;
		line-height: 1.4;
		/* border-left: 6px solid #000; */
		padding: 0 0 0 0.6em;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto 32px;
		position: relative;
	}
	.tree .column-box h3:after {
		content:"";
		height: 100%;
		outline: 2px solid #000;
		position: absolute;
		top: 1px;
		left: 0;
	}
	#column01.tree .column-box h3:after {
		border-left: 2px solid #6ccffc;
	}
	#column02.tree .column-box h3:after {
		border-left: 2px solid #ffc600;
	}
	#column03.tree .column-box h3:after {
		border-left: 2px solid #a1ed00;
	}
	.tree .column-box .column-pic {
		text-align: center;
		margin: 0 auto 32px;
	}
	.tree .column-box .column-pic figure {
		margin: 0 0 6px;
	}
	.tree .column-box .column-pic .caption {
		font-size: 1.4rem;
	}
	.tree .column-box .column-block {
		margin: 0 auto 36px;
	}
	.tree .column-box .column-block h4 {
		font-size: 2.4rem;
		line-height: 1.4;
		border-bottom: 3px solid #000;
		padding: 0 0 0.3em 0.3em;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0 auto 24px;
	}
	.tree .column-box .column-block p {
		line-height: 2.4;
	}
	.tree .column-box .column-block p.bottom-space,
	#column01.tree .column-box .column-block p {
		margin: 0 0 28px;
	}
}


/* accordion */
.accordion-box .content-head h4::after {
	font-family: FontAwesome;
	content : "\f0d7";
	margin: 0 0 0 0.8em;
}
.accordion-box .active h4::after {
	font-family: FontAwesome;
	content : "\f0d8";
	margin: 0 0 0 0.8em;
}

@media screen and (max-width: 640px) {
	.accordion-box {
		width: 100%;
		padding: 0.2em 0 0;
	}
	.accordion-box .content-head {
		background: #000;
		color: #fff;
		text-align: center;
		padding: 0.4em 0;
		margin: 0 0 3.6%;
	}
	.accordion-box .content-head h4 {
		font-size: 1.0rem;
		margin: 0;
	}
}
	
@media print, screen and (min-width: 641px) {
	.accordion-box {
		width: 100%;
		padding: 0.2em 0 0;
	}
	.accordion-box .content-head {
		background: #000;
		color: #fff;
		text-align: center;
		border: 2px solid #000;
		cursor: pointer;
		padding: 0.4em 0;
		margin: 0 0 24px;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	.accordion-box .content-head h4 {
		font-size: 1.2rem;
		margin: 0;
	}
	.accordion-box .content-head:hover {
		background: #fff;
		color: #000;
	}
}


/* column-list check */
.yaeyama #column01-list-box.column-list li#yaeyama,
.vietnam #column01-list-box.column-list li#vietnam,
.thailand #column01-list-box.column-list li#thailand,
.murao #column02-list-box.column-list li#murao,
.hokuto #column02-list-box.column-list li#hokuto,
.omae #column02-list-box.column-list li#omae,
.kondo #column02-list-box.column-list li#kondo,
.nonomura #column02-list-box.column-list li#nonomura,
.kaito #column02-list-box.column-list li#kaito,
.ishii #column02-list-box.column-list li#ishii,
.natsume #column02-list-box.column-list li#natsume,
.wakasa #column02-list-box.column-list li#wakasa,
.goto #column02-list-box.column-list li#goto {
	background: rgba(249,255,1,0.3);
}
.yaeyama #column01-list-box.column-list li#yaeyama a,
.vietnam #column01-list-box.column-list li#vietnam a,
.thailand #column01-list-box.column-list li#thailand a,
.murao #column02-list-box.column-list li#murao a,
.hokuto #column02-list-box.column-list li#hokuto a,
.omae #column02-list-box.column-list li#omae a,
.kondo #column02-list-box.column-list li#kondo a,
.nonomura #column02-list-box.column-list li#nonomura a,
.kaito #column02-list-box.column-list li#kaito a,
.ishii #column02-list-box.column-list li#ishii a,
.natsume #column02-list-box.column-list li#natsume a,
.wakasa #column02-list-box.column-list li#wakasa a,
.goto #column02-list-box.column-list li#goto a {
	pointer-events: none;
	text-decoration: none;
}