@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/*-------------------------------------------------
共通指定
-------------------------------------------------*/
/* PAN */
#pan{ overflow: hidden;}
#pan ol{ clear: both; float: right;}
#pan ol li{ float:left; color: #ffffff;}
#pan ol li a{ color: #ffffff; text-decoration: underline;}
#pan ol li a:hover{ text-decoration: none;}
#pan ol > li:before {content:"　\003e　";}
#pan ol > li:first-child:before { content: none;}

/* FRAME */
.box_contents_frame_01{}

/* TITLE */
.box_title_frame_01{ padding-top: 20px;}
.box_title_frame_01 h1{ font-weight: bold; text-align: center; color: #ffffff; line-height: 1;}
.box_title_frame_01 p{ font-weight: bold; text-align: center; color: #ffffff;}

.box_title_frame_02 h2{ text-align: center; font-weight: bold;}
.box_title_frame_02 .subtitle_01{ text-align:center; font-weight: bold;}

/* TEXT */

/* BUTTON */
.btn_01 a{ display: block; background: #e1e1e1; font-weight: bold; padding: 10px; border-radius: 25px;}
.btn_01 a:hover{ background: #c6dbe3;}

/* LIST */
dl.list_text_01{}
dl.list_text_01 dt{ border-bottom: 2px solid #c6dbe3; background: #096b91; color: #ffffff; font-weight: bold;}
dl.list_text_01 dd{}

dl.list_text_02{ margin-bottom: 40px;}
dl.list_text_02 dt{ font-weight: bold; margin-bottom: 10px;}
dl.list_text_02 dd{ margin-bottom: 30px; font-size: 0.9em;}

/* TABLE */

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/* PAN */
	#pan ol li{ font-size: 0.7em;}
	
	/* FRAME */
	.box_contents_frame_01{ padding: 40px 0 100px;}

	.box_text_frame_02 p{ margin-bottom: 1em;}
	
	/* TITLE */
	.box_title_frame_01{ padding: 40px 0 10px;}
	.box_title_frame_01 p{ font-size: 2em;}
	.box_title_frame_01 h1{ font-size: 1em; margin-bottom: 30px;}

	.box_title_frame_02{ border-top: 1px solid #c6dbe3; border-bottom: 1px solid #c6dbe3; padding: 10px 0 20px; margin-bottom: 40px;}
	.box_title_frame_02 h2{ font-size: 10vw;}
	.box_title_frame_02 .subtitle_01{ font-size: 1.4em;}

	/* BUTTON */

	/* LIST */
	dl.list_text_01 dt{ width: 100%; padding: 10px; text-align: center;}
	dl.list_text_01 dd{ width: 100%; padding: 20px 0 30px;}

	/* TABLE */
}
@media screen and (min-width: 768px), print {
	/* PAN */
	#pan ol{ padding-left: 40px;}
	#pan ol li{ font-size: 0.8em;}

	/* FRAME */
	.box_contents_frame_01{ padding: 80px 0 200px;}
	
	.box_text_frame_02{ max-width: 800px; margin: 0 auto;}
	.box_text_frame_02 p{ margin-bottom: 1em;}
	
	/* TITLE */
	.box_title_frame_01{ padding: 60px 0 10px;}
	.box_title_frame_01 p{ font-size: 3em;}
	.box_title_frame_01 h1{ font-size: 1.4em; margin-bottom: 30px;}

	.box_title_frame_02 h2{ font-size: 4em;}
	.box_title_frame_02 .subtitle_01{ font-size: 1.8em; margin-bottom: 40px;}
	
	/* BUTTON */
	.btn_01{ max-width: 300px; margin: 0 auto;}

	/* LIST */
	dl.list_text_01 dt{ width: 30%; padding: 20px;}
	dl.list_text_01 dd{ width: 70%; padding: 20px; border-bottom: 2px solid #c6dbe3;}

}

/*-------------------------------------------------
レイアウト
-------------------------------------------------*/
/* GREETING */
.box_greeting_01{ background: url("../message/images/main_image_01.jpg") center top no-repeat;}
.box_greeting_01 .text_01{ font-weight: bold; text-align: center;}

/* BUSINESS */
.box_business_01{}

ul.list_business_01{}
ul.list_business_01 li{ text-align: center;}
ul.list_business_01 li h3{ padding-top: 20px;}

ul.list_business_02{}
ul.list_business_02 li{ background: #c6dbe3; text-align: center;}
ul.list_business_02 li h3{ font-weight: bold;}
ul.list_business_02 li p{ font-weight: bold;}

ul.list_business_03{}
ul.list_business_03 li{ font-weight: bold; text-indent: -1em; padding-left: 1em; margin-bottom: 1em;}
ul.list_business_03 li::before{ content: "●";}

/* CONTACT */
.box_privacy{ border: 1px solid #c6dbe3;;}
.box_contact{}
.list_contact_01{}

dl.list_contact_01{ margin-bottom: 20px;}
dl.list_contact_01 dt{ font-weight: bold;}
dl.list_contact_01 dd{ border-bottom: 1px solid #c6dbe3;}
.hissu{ color: #ffffff; background: #096b91; font-size: 0.7em; border-radius: 5px; padding: 2px 5px; margin: 0 5px;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/* GREETING */
	.box_greeting_01{ padding: 60px 0; margin-bottom: 40px; background-size: 200%;}
	.box_greeting_01 .text_01{ font-size: 5vw; line-height: 2;}

	/* BUSINESS */
	.box_business_01{ margin-bottom: 100px;}
	
	ul.list_business_01 li{ margin-bottom: 80px;}
	ul.list_business_01 li h3{ font-size: 8vw;}
	
	ul.list_business_02 li{ margin-bottom: 20px;}
	ul.list_business_02 li h3{ font-size: 6vw; padding-top: 10px;}
	ul.list_business_02 li p{ padding: 0 20px 30px;}

	ul.list_business_03 li{ font-size: 1.2em; margin-bottom: 20px;}
	ul.list_business_03 li{}
	
	/* CONTACT */
	.box_privacy{ padding: 20px 20px 0; margin-bottom: 60px;}

	dl.list_contact_01{}
	dl.list_contact_01 dt{ background: #c6dbe3; font-size: 1.2em; padding: 10px;}
	dl.list_contact_01 dd{ padding: 20px 10px;}
	
}
@media screen and (min-width: 768px), print {
	/* GREETING */
	.box_greeting_01{ padding: 120px 0; margin-bottom: 60px; background-size: 120%;}
	.box_greeting_01 .text_01{ font-size: 2.4em;}
	
	/* BUSINESS */
	.box_business_01{ margin-bottom: 160px;}
		
	ul.list_business_01{}
	ul.list_business_01 li{ width: calc(33.333% - 40px * 2/3); margin-right: 40px;}
	ul.list_business_01 li:last-child{ margin-right: 0;}
	ul.list_business_01 li h3{ font-size: 2em;  margin-bottom: 10px;}
	
	ul.list_business_02 li{ width: calc(50% - 20px * 1/2); margin: 0 20px 20px 0; margin-bottom: 20px;}
	ul.list_business_02 li:nth-child(2n+2){ margin-right: 0;}
	ul.list_business_02 li h3{ font-size: 1.6em; padding-top: 10px;}
	ul.list_business_02 li p{ padding: 0 20px 20px;}

	ul.list_business_03{ max-width: 700px; margin: 0 auto;}
	ul.list_business_03 li{ font-size: 1.2em; margin-bottom: 20px;}
	
	/* CONTACT */
	.box_privacy{ padding: 40px 40px 20px; margin-bottom: 80px;}
	
	dl.list_contact_01 dt{ float: left; padding: 20px 20px 20px 0;}
	dl.list_contact_01 dd{ padding: 20px 20px 20px 200px;}
	
}
@media screen and (min-width: 768px) and (max-width: 1024px) {

}