@charset "utf-8";
/* CSS Document */

/* ---------------------------
 /anniversary
----------------------------- */

body#anniversary #contents section {padding: 0;}

#contents section#message div.message,
#contents section#founder div.about_title,
#contents section#history div.history_title {
	width: 60%;
	margin: 0 auto;
	padding: 2em 0;
	background-color: #00A7E3;
	border: solid 2px #FFF;}
#contents section#message h3,
#contents section#founder h3,
#contents section#history h3 {
	font-size: 200%;
	color: #FFF;
	text-align: center;}


#contents br.br_sp {display: none;}


/* mainvisual */
#contents div.special_main {
	width: 100%;
	background-image: url("../images/main_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	background-attachment: fixed;
	margin: 0 auto;}
#contents div.special_main h2 {width: 70%; margin: 0 auto;}
#contents div.special_main img {width: 100%;}


/* message */

#contents section#message {
	background-image: url("../images/message_bg.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
	margin-bottom: 3em;}
#contents section#message div.box_message {
	width: 100%;
	margin: 0 auto;
	margin-top: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;}
#contents section#message div.box_message div.images.img01 {width: calc(25% - 2em); padding: 2em 0 0 2em; margin-top: 0;}
#contents section#message div.box_message div.images.img02 {width: calc(40% - 2em); padding: 0 0 0 2em; margin-top: 0;}
#contents section#message div.box_message div.images.img01 img {
	vertical-align: bottom; box-shadow: 20px 20px 0 0 #D1EFFA;}
#contents section#message div.box_message div.message_text01 {
	width: 63%;
	padding:3em 2em 2em 6%; }
#contents section#message div.box_message div.message_text02 {
	width: calc(100% - 4em);
	padding: 3em 2em 1em; }
#contents section#message div.box_message div.message_text03 {
	width: 52%;
	padding:0 1em 2em 2em; }
#contents section#message div.box_message p.title {
	font-size: 140%; font-weight: 600; text-shadow: 1px 1px 0 #D1EFFA; position: relative;}
#contents section#message div.box_message p.title:before {
	position: relative;
	left: 0;
	margin-right: .5em;
	content: '●';
	color: #00A7E3;}


/* founder */

#contents section#founder {
	background-color: #483C2C;
	background-image: url("../images/founder.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	position: relative;}
#contents section#founder div.inner {padding-top: 0; position: relative; padding-bottom: 12em;}

#contents section#founder p.about_sub_title {
	font-size: 120%;
	letter-spacing: 3px;
	margin-bottom: 1em;
	padding-left: .8em;
	border-left: solid 8px #00A7E3;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}

#contents section#founder div.about_founder {
	width: calc(44% - 4em);
	margin-top: 5em;
	margin-left: 55%;
	padding: 1em 2em 2em 2em;
	background-color: rgba(255,255,255,0.7);}
#contents section#founder div.about_founder p.name {
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 150%;
	margin-bottom: 0;}
#contents section#founder div.about_founder p.alphabet {color: #00A7E3; margin-top: 0; font-style: italic;}
#contents section#founder div.about_founder p.name span {font-size: 70%; padding-left: 1em;}

#contents section#founder div.founder_goroku {
	padding-top: 3em;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 90%;
	flex-wrap: wrap;}
#contents section#founder div.founder_goroku h4 {
	width: 100%;
	text-align: center;
	margin-bottom: 2em;}
#contents section#founder div.founder_goroku h4 img {width: 400px;}
#contents section#founder div.founder_goroku div.goroku {width: 30%;}
#contents section#founder div.founder_goroku div.images {
	width: 60%; margin: 0 auto;
	border: solid 2px #FFF;
	background-color: rgba(0,0,0,0.3);}
#contents section#founder div.founder_goroku div.text {
	color: #EFEFEF;
	font-size: 90%;
	line-height: 1.7;
	padding-top: 2em;}


/* history */

#contents section#history {position: relative;}

#contents section#history div.inner {
	padding-top: 0; position: relative; margin-top: -4em; padding-bottom: 0;}
#contents section#history div.box_history {position: inherit;}

#contents section#history div.box_history {
	position: relative;
	overflow: auto;}
#contents section#history div.box_history:before {
	position: absolute;
	left: calc(50% - 2px);
	content: '';
	display: block;
	width: 4px;
	height: 100%;
	background: #999;}

#contents section#history div.history_detail01,
#contents section#history div.history_detail02 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 3em;
	position: relative;}
#contents section#history div.history_detail02 {flex-direction: row-reverse;}
#contents section#history div.history_detail01:before,
#contents section#history div.history_detail02:before {
	position: absolute;
	top: 1.7em;
	left: 45%;
	content: '';
	display: block;
	width: 10%;
	height: 3px;
	background: #00A7E3;}
#contents section#history div.history_detail01::after,
#contents section#history div.history_detail02::after {
	content: '';
	position: absolute;
	top: 13px;
	right: calc(50% - 15px);
	width: 30px;
	height: 30px;
	background-color: none;
	background-size: contain;
	background-image: url('../images/point.png');
	background-repeat: no-repeat;}

#contents section#history div.history_detail01 div.box_text,
#contents section#history div.history_detail01 div.box_photo,
#contents section#history div.history_detail02 div.box_text,
#contents section#history div.history_detail02 div.box_photo {
	width: calc(48% - 4em);
	margin: 0 2em;}
#contents section#history div.history_detail01 p.detail_title,
#contents section#history div.history_detail02 p.detail_title {
	text-align: center;
	font-size: 110%;
	font-weight: 600;}
#contents section#history div.history_detail01 p.detail_title.second,
#contents section#history div.history_detail02 p.detail_title.second {margin-top: 2em;}

#contents section#history div.history_detail01 p.year,
#contents section#history div.history_detail02 p.year {font-weight: 600; padding: 0 1em;}

#contents section#history div.history_detail01 p.year {text-align: right;}
#contents section#history div.history_detail02 p.year {text-align: left;}

#contents section#history div.history_detail01 p.year span,
#contents section#history div.history_detail02 p.year span {font-size: 200%; padding-right: .15em;}

#contents section#history div.history_detail01 div.box_text p.detail,
#contents section#history div.history_detail02 div.box_text p.detail {line-height: 1.8; font-size: 90%;}

#contents section#history div.history_detail01 div.box_text div.box_column,
#contents section#history div.history_detail02 div.box_text div.box_column {
	margin-top: 2em;
	background-color: #D1EFFA;
	padding: .5em 1.5em 1em;}
#contents section#history div.history_detail01 div.box_text div.box_column p.column_title,
#contents section#history div.history_detail02 div.box_text div.box_column p.column_title {
	font-weight: 600;
	line-height: 1.8;
	padding-left: .8em;
	border-left: solid 5px #00A7E3;}

#contents section#history div.box_history div.images.second {margin-top: 2em;}
#contents section#history div.box_history div.images img {position: relative; vertical-align: bottom;}
#contents section#history div.box_history div.images a {position: relative;}
#contents section#history div.box_history div.images a::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background-color: #666666;
	background-size: contain;
	background-image: url('../images/icon_zoom.png');
	background-repeat: no-repeat;}

#contents section#history div.box_history div.images p.caption {
	font-size: 80%; text-align: center;}

#contents section#history div.history_present {
	width: 60%;
	margin: 0 auto;
	background-color: #ffeba0;
	position: relative;
	z-index: 999;
	margin-top: 5em;}
#contents section#history div.history_present div.images {width: 100%; margin: 0 auto;}



/* present */

#contents section#present {position: relative; background-color: #dff0ff; margin-top: -10em;}
#contents section#present div.inner {width: 100%; padding-top: 13em; padding-bottom: 0;}
#contents section#present div.present_message {
	width: 800px;
	margin: 0 auto;
	border: double 5px #C4E6F3;
	border-radius: 12px;
	padding: 2em 0 1.5em;
	background-color: #FFF;
	margin-top: 4em;
	margin-bottom: 8em;
	position: relative;}
#contents section#present div.present_message p {
	padding: 0 150px;
	text-align: center;
	font-size: 110%;
	line-height: 2.2;}
#contents section#present div.present_message p.name {margin-top: 2em;}
#contents section#present div.present_message div.images.img_thanks {width: 35%; margin: 0 auto;}
#contents section#present div.present_message div.images.img_left {
	width: 220px;
	position: absolute;
	top: -60px;
	left: -100px;}
#contents section#present div.present_message div.images.img_right {
	width: 250px;
	position: absolute;
	bottom: -50px;
	right: -100px;}



@media only screen and (min-width: 480px) and (max-width: 999px) {
	#contents br.br_sp {display: none;}
	
	/* present */
	#contents section#present div.present_message {
		width: 70%; margin-top: 0em; margin-bottom: 5em;}
	#contents section#present div.present_message p {padding: 0 50px;}
	#contents section#present div.present_message div.images.img_left,
	#contents section#present div.present_message div.images.img_right {display: none;}

}

@media only screen and (max-width: 480px) {
	#contents br.br_sp {display: block;}
	#contents br.br_pc {display: none;}
	
	#contents section#message div.message,
	#contents section#founder div.about_title,
	#contents section#history div.history_title {width: 70%; padding: 1.2em 0;}
	#contents section#message h3,
	#contents section#founder h3,
	#contents section#history h3 {font-size: 150%;}

	/* mainvisual */
	#contents div.special_main h2 {width: 100%;}

	/* message */
	#contents section#message {margin-bottom: 3em;}
	#contents section#message div.box_message {margin-top: 2em; display: block;}
	#contents section#message div.box_message div.images.img01 {
		width: 40%; padding: 0; margin: 0 auto; margin-top: 0; padding-bottom: 2em;}
	#contents section#message div.box_message div.images.img01 img {vertical-align: bottom; box-shadow: 10px 10px 0 0 #D1EFFA;}
	#contents section#message div.box_message div.images.img02 {width: 70%; padding: 0; margin: 0 auto; margin-top: 2em;}
	#contents section#message div.box_message div.message_text01,
	#contents section#message div.box_message div.message_text02,
	#contents section#message div.box_message div.message_text03 {width: 90%; padding:0; margin: 0 auto;}
	#contents section#message div.box_message p.title {font-size: 120%;}
	
	/* founder */
	#contents section#founder {background-position: -70px top; background-size: 170%;}
	#contents section#founder div.inner {padding-bottom: 6em;}
	#contents section#founder div.about_founder {width: calc(90% - 4em); margin-top: 18em; margin-left: 5%;}
	#contents section#founder div.founder_goroku {padding-top: 0; display: block; width: 90%;}
	#contents section#founder div.founder_goroku h4 img {width: 90%;}
	#contents section#founder div.founder_goroku div.goroku {
		width: 100%; display: flex; justify-content: space-between; margin-bottom: 2em;}
	#contents section#founder div.founder_goroku div.images {width: 25%; margin: 0;}
	#contents section#founder div.founder_goroku div.text {width: 67%; padding-top: 0;}

	
	
	/* history */
	#contents section#history div.inner {margin-top: -2em;}
	#contents section#history div.history_detail01,
	#contents section#history div.history_detail02 {
		display: block;
		background-color: rgba(255,255,255,1.0);
		margin-top: 4em;
		padding-bottom: 2em;}
	#contents section#history div.history_detail01:before,
	#contents section#history div.history_detail02:before {top: 13px; left: 40%; width: 20%;}
	#contents section#history div.history_detail01::after,
	#contents section#history div.history_detail02::after {top: -1px;}
	#contents section#history div.history_detail01 div.box_text,
	#contents section#history div.history_detail01 div.box_photo,
	#contents section#history div.history_detail02 div.box_text,
	#contents section#history div.history_detail02 div.box_photo {width: 90%; margin: 0 auto;}
	#contents section#history div.history_detail01 p.year,
	#contents section#history div.history_detail02 p.year {padding: 0;}
	#contents section#history div.box_history div.images.second {margin-top: 1em;}
	#contents section#history div.history_present {width: 80%;}
	
	/* present */
	#contents section#present {margin-top: -5em;}
	#contents section#present div.inner {padding-top: 3em;}
	#contents section#present div.present_message {width: 90%; margin-bottom: 2em;}
	#contents section#present div.present_message p {padding: 0 2em; font-size: 100%;}
	#contents section#present div.present_message div.images.img_thanks {width: 50%;}
	#contents section#present div.present_message div.images.img_left,
	#contents section#present div.present_message div.images.img_right {display: none;}

	
	
}

/* FancyBox */

.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }
  
.fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }


.fancybox-thumbs__list a {background-position: top;}

.fancybox-button[disabled], .fancybox-button[disabled]:hover {
	display: none;
}

.fancybox-caption {font-size: 20px; letter-spacing: 2px;}