/* CSS Document */

html { vertical-align: top; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; line-height: 2; -webkit-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body { text-align: center; height: 100%; width: 100%; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; }
a { color: #0095ea; text-decoration: none; }
a:hover { text-decoration: underline; }
.pink { color: #f06adb; font-weight: 700; }
strong { font-weight: 700; }
h1, h2, h3, h4, h5 { margin: 0; padding: 0; }
ul, dl { margin: 0; padding: 0; }
li { list-style: none; }

.fbox { margin: 0; text-align: center; width: 100%; }

.header { background: #0095ea; height: 100vh; width: 100%; }
.logo { height: 100vh; vertical-align: middle; margin: 0; position: relative; text-align: center; width: 100%; }
.logo img { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 80%; max-width: 482px; transition:0.5s ease; }
.menu { display: block; margin:0 auto; min-width: 620px; position: absolute; bottom: 32px; right: 50%; transform: translateX(50%); height: 32px;  width: 40%; }
.menu ul li { display: inline-block; width: 16.5%; }
.menu ul li a { color: #ffffff; font-size: 1.4rem; font-weight: 500; }
.menu ul li a:hover { color: #003789; text-decoration: none; }

.hs, .sh { width: 100%; }
.ls, .sl { background: #0095ea; height: 60px; position: fixed; width: 50%; }
.ls .lbox, .sl .lbox { display: block; height: 60px; margin: 0 auto; min-width: 500px; text-align: left; width: 50%; position: absolute; z-index: 1500; right: 0; }
.ls img, .sl img { position: static; transform: translateY(0%) translateX(0%); height: 100%; width: auto; transition:0.5s ease; }
.fixed, .sm { background: #0095ea; height: 60px; position: fixed; width: 50%; bottom: auto; top: 0; right: 0; transform: translateX(0%); }
.fixed div, .sm div { display: block; height: 60px; margin: 0 auto; min-width: 500px; text-align: right; width: 50%; position: absolute; z-index: 1501; left: 0; }
.fixed > div ul, .sm > div ul { display: none; }
.fixed > div ul li, .sm > div ul li { display: inline-block; height: 56px; width: 80%; }
.fixed > div ul li a, .sm > div ul li a { color: #ffffff; display: block; font-size: 2rem; font-weight: 700; line-height: 56px; text-align: center; }
.sm > div ul li a:hover { color: #003789; }
.fixed > div span, .sm > div span { content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 22px; top: 29px; }
.fixed > div span:before, .sm > div span:before { transform: rotate(0deg);  content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 0; top: -7px; }
.fixed > div span:after, .sm > div span:after { transform: rotate(0deg);  content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 0; top: 7px;}

.fixed > div.mn ul, .sm > div.mn ul { background: #0095ea; border-radius: 0 0 4px 4px; display: block; height: 360px; right: 0; min-width: auto; padding: 24px 0 0; position:absolute; top: 60px; width: 280px; transform: translateX(0%); text-align: center; }
.fixed > div.mn span, .sm > div.mn span { background-color: rgba(255, 255, 255, 0); }
.fixed > div.mn span:before, .sm > div.mn span:before { transform: rotate(45deg); top: 0; transition:0.2s ease; width: 25px; }
.fixed > div.mn span:after, .sm > div.mn span:after { transform: rotate(-45deg); top: 0; transition:0.2s ease; width: 25px; }

.title_box { background-image: url(../img/title_bg_l.gif); background-size: 4280px 288px; background-position: top center; height: 288px; width: 100%; }
.title_box h2 { background-image: url(../img/title_bg.gif); background-size: 482px 288px; background-position: top center; color: #0095ea; display: block; font-size: 2.4rem; line-height: 288px; margin: 0 auto; text-align: center; width: 482px; }
.cbox { margin: 0 auto; max-width: 1000px; width: 100%; }
.p_button { border: 0; padding-top: 80px; }
.p_button > div { display: inline-block; width: 45.5%;  }
.p_button > div:first-child { margin-right: 9%;  }
.p_button > div p { color: #0095ea; font-size: 1.6rem; font-weight: 700; margin: 0 0 16px; }
.p_button > div a, .c_button a, #cc .cbox form > input { background: #0095ea; border-radius: 0.4rem; color: #ffffff; display: block; font-size: 2.4rem; font-weight: 700; height: 7.6rem; line-height: 76px; width: 100%; }
#cc .cbox form > input { border: 0; cursor: pointer; margin: 0 auto 7rem; outline: none; width: 43.5%; }
.p_button > div a:hover, .c_button a:hover, #cc .cbox form > input:hover { background: #f06adb; text-decoration: none; }
.aside { border-top: 2px solid #0095ea; color: #0095ea; font-size: 1.8rem; font-weight: 700; margin: 88px 0 32px; padding:  88px 0 0; }
h3 { color: #0095ea; font-size: 5rem; font-weight: 700; line-height: 5rem; }
.furigana { color: #0095ea; font-size: 1.2rem; margin: 0; }
.cb02 { padding: 0 0 8rem; }
.cb02 .furigana { margin: 0 0 18px; }
.ii { margin: 0 0 24px; max-width: 696px; width: 100%; }
#cb05 .ii { max-width: 500px; }
.pd_cases { display: block; width: 100%; }
.pd_cases .caption { font-size: 1.2rem; margin: 0 0 3.6rem; text-align: left; }
.pd_cases.pc01 { display: inline-block; margin: 0 12px 0 0; max-width: 494px; padding: 2.4rem 0 0; width: 50%; }
.pd_cases.pc02 { display: inline-block; max-width: 49.4rem; padding: 2.4rem 0 0; width: 50%; }
.pd_cases img { width: 100%; }
.ct { font-size: 1.6rem; line-height: 2.8rem; margin: 0 0 1.6rem; text-align: left; }
.ct_img { display: block; padding: 2.4rem 0; width: 100%; }
h4 { color: #0095ea; font-size: 3.2rem; line-height: 3.9rem; margin: 0 0 0.8rem; padding: 2rem 0 0; text-align: left }
table { border-bottom: 0.2rem solid #0095ea; border-spacing: 0 4px; margin: 0 0 3.2rem; width: 100%; }
tr { width: 100%; }
th { border-bottom: 0.2rem solid #0095ea; color: #0095ea; font-size: 1.4rem; line-height: 1.8rem;  }
td { padding: 1rem 3.2rem 0.9rem; text-align: left; }
td:first-child { background: #0095ea; color: #ffffff; font-size: 1.8rem; line-height: 2.4rem; width: 30%; }
td:nth-child(2) { color: #0095ea; font-size: 2.8rem; font-weight: 700; width: 30%; }
td:last-child { color: #0095ea; width: 40%; font-size: 1.3rem; line-height: 2rem; }
ol { padding: 0; margin: 0 0 1.6rem; }
li { text-align: left; font-size: 1.8rem; line-height: 2.4rem; }
.c_button { margin: 0 auto; padding: 4rem 0 2rem; width: 45.5%; }

#cb03 .cbox, #cb04 .cbox, #cb05 .cbox { padding: 8rem 0 10rem;}
#cb03 h4, #cb04 h4, #cb05 h4 { padding: 0 0 1rem; }

dl { text-align: left; }
dl dt, dl dd { display: inline-block; font-size: 1.8rem; line-height: 3rem; }
dl dt { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-weight: 700; width: 15%; vertical-align: top; }
dl dd { margin: 0; width: 85%; }

.tb { color: #0095ea; font-size: 2.4rem; padding: 14rem 0 6rem; }
#pp p { font-size: 1.6rem; text-align: left; }
#pp .cbox > ol { padding-bottom: 8rem}
#pp .cbox > ol > div > li { font-size: 1.8rem; font-weight: 700; padding-top: 1.6rem; }
#pp .cbox > ol > div > ol > li { font-size: 1.6rem; list-style-type: decimal; margin-left: 2rem; }
#pp .cbox > ol > div > ol > li > ol > li { font-size: 1.4rem; font-weight: 400; line-height: 2.4rem; }

#cc .cbox { padding-bottom: 2rem; height: auto; min-height: calc(100vh - 45.3rem); }
#cc .cbox > p { font-size: 1.6rem; margin-top: 0; }
#cc table { border-top: 0.1rem solid #0095ea; border-bottom: 0.1rem solid #0095ea; padding: 0.8rem 0 0.8rem; }
#cc td { padding: 1rem 3.2rem 0.9rem; }
#cc td:first-child { background-color: transparent; color: #222222; font-size: 1.6rem; width: 25%; }
#cc td:last-child { width: 75%; }
#cc td:last-child input { font-size: 1.6rem; line-height: 3.6rem; padding: 0.5rem 1rem; height: 4.6rem; width: 60%; }
#cc td:last-child textarea { font-family: sans-serif; font-size: 1.6rem; line-height: 2.4rem; padding: 0.6rem 1rem; min-height: 10rem; width: 100%; }

#cc table#conf { padding: 0.8rem 0 0.5rem; }
#cc #conf td:last-child input { border: 0; cursor: auto; outline: none; padding: 1.3rem 1rem; height: 4.5rem; }
#cc #conf td:last-child textarea { border: 0; cursor: auto; outline: none; padding: 0.2rem 1rem 0rem; resize: none; min-height: 10.3rem; }
#cc #conf td:first-child { border-bottom: 0.1rem dotted #0095ea; }
#cc #conf td:last-child { border-bottom: 0.1rem dotted #0095ea; }
#cc #conf tr:last-child td:first-child { border: 0; padding: 0.8rem 3.2rem 1.1rem; }
#cc #conf tr:last-child td:last-child { border: 0; }
#cc h3 { font-size: 2.4rem; padding-bottom: 0.6rem; }

.footer { background: #0095ea; color: #ffffff; font-size: 2rem; height: 16.1rem; line-height: 16rem;  }

@media screen and (max-width: 1200px) {
	.cbox { width: 83.3% }
	.ls, .sl, .lv, .fixed, .sm { min-width: auto; }
	.ls .lbox, .sl .lbox, .lv .lbox, .fixed > div, .sm > div { width: 83.1%; min-width: auto; }
	.ii { margin: 0 0 2%; }
	.pd_cases.pc01 { margin-right: 1.2%; padding: 2% 0 0; width: 49.4%; }
	.pd_cases.pc02 { padding: 2% 0 0; width: 49.4%; }
	.c_button { width: 50% }
	dl dt { width: 14rem; }
	dl dd { width: calc(100% - 14rem); }
	#cc .cbox form > input { width: 42%; }
}

@media screen and (max-width: 1000px) {
	.cbox { width: 85.5%; }
	.ls .lbox, .sl .lbox, .lv .lbox, .fixed > div, .sm > div { width: 85.4%; }
	.c_button { width: 60% }
	#cc .cbox form > input { width: 40.5%; }
}

@media screen and (min-width: 800px) {
	.hs .lv { background: #0095ea; height: 60px; position: fixed; width: 50%; }
	.hs .lv .lbox { display: block; height: 60px; margin: 0 auto; min-width: 500px; text-align: left; width: 50%; position: absolute; z-index: 1500; right: 0; }
	.hs .lv img { position: static; transform: translateY(0%) translateX(0%); height: 100%; width: auto; transition:0.5s ease; }
}

@media screen and (max-width: 800px) {
	.menu { height: 60px; width: 50%; min-width: auto; position: fixed; bottom: auto; top: 0; right: 0; transform: translateX(0%); text-align: left; }
	.menu div { display: block; height: 60px; width: 87.7%; text-align: right; position: absolute; z-index: 1501; left: 0; }
	.menu > div ul { display: none; }
	.menu > div ul li.sp { display: inline-block; }
	.menu > div ul li a { display: block; font-size: 2rem; font-weight: 700; line-height: 56px; text-align: center; }
	.menu > div span { content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 22px; top: 29px; }
	.menu > div span:before { transform: rotate(0deg);  content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 0; top: -7px; }
	.menu > div span:after { transform: rotate(0deg);  content: ''; display: block; height: 2px; width: 22px; border-radius: 3px; background-color: #ffffff; position: absolute; right: 0; top: 7px;}
	
	.menu > div.mn ul, .sm > div.mn ul { background: #0095ea; border-radius: 0px; display: block; right: -75%; height: 55vh; min-width: auto; width: 150vw; padding: 24px 0 0; position:absolute; top: 59px; z-index: 1000; transform: translateX(0%); text-align: center; }	.menu > div ul li { height: 56px; width: 80%; }
	.menu > div.mn span { background-color: rgba(255, 255, 255, 0); }
	.menu > div.mn span:before { transform: rotate(45deg); top: 0; transition:0.2s ease; width: 25px; }
	.menu > div.mn span:after { transform: rotate(-45deg); top: 0; transition:0.2s ease; width: 25px; }
	
	.lv { background: #0095ea; height: 60px; position: fixed; width: 50%; }
	.lv .lbox { display: block; height: 60px; margin: 0 auto; text-align: left; width: 50%; position: absolute; z-index: 1500; right: 0; }
	.lv img { position: static; transform: translateY(0%) translateX(0%); height: 100%; width: auto; transition:0.5s ease; }
	
	.cbox { width: 87.7%; }
	.ls .lbox, .sl .lbox, .lv .lbox, .fixed > div, .sm > div { width: 87.7%; }
	.c_button { width: 70% }
	td { padding: 3.8% 4%; }
	td:first-child { font-size: 1.6rem; }
	td:nth-child(2) { font-size: 2.4rem; }
	
	#cc td:first-child { padding-right: 0; width: 30%; }
	#cc td:last-child { padding-left: 1.6rem; width: 70%; }
	#cc td:last-child input {width: 100%; }
	#cc .cbox form > input { width: 60%; }
}

@media screen and (max-width: 600px) {
	.cbox { width: 90%; }
	.ls .lbox, .sl .lbox, .lv .lbox, .fixed > div, .sm > div, .menu div { width: 90%; }
	.menu > div.mn ul, .sm > div.mn ul { right: -72%; }
	.header { height: 100vh; padding: 0; }
	.c_button { width: 80% }
	td:first-child { font-size: 1.5rem; }
	td:nth-child(2) { font-size: 2rem; }

	#cc table { padding: 0.8rem 0; }
	#cc td:first-child { display: block; padding: 0.8rem 0 0.2rem; width: 100%; }
	#cc td:last-child { display: block; padding: 0.2rem 0 0.8rem; width: 100%; }
	#cc td:last-child input { padding: 0.5rem 1rem; height: 4.6rem; width: 100%; }
	#cc td:last-child textarea { padding: 0.6rem 1rem; min-height: 9.6rem; width: 100%; }
	#cc .cbox > p { text-align: left; }
	#cc #cp > p { text-align: center; }
	#cc .cbox form > input { width: 80%; }
	#cc #conf td:first-child, #cc #conf tr:last-child td:first-child { padding: 1.2rem 0 0; border: 0; }
	#cc #conf td:last-child input, #cc #conf td:last-child textarea { padding: 1.3rem 0rem 0.8rem; }
}

@media screen and (max-width: 500px) {
	h4 { font-size: 2.4rem; line-height: 3.2rem; margin: 0 0 0.8rem; padding: 2rem 0 0; text-align: left }
	.title_box h2 { width: 100%; }
	.menu > div.mn ul, .sm > div.mn ul { right: -70%; }
	.p_button { padding-top: 40px; }
	.p_button > div { padding-top: 40px; width: 90%; }
	.p_button > div:first-child { padding-top: 40px; margin-right: 0; }
	.c_button { width: 90% }
	td:first-child { font-size: 1.4rem; line-height: 2rem; }
	td:last-child { line-height: 1.8rem; }
	dl dt { padding-top: 1.2rem; }
	dl dt, dl dd { width: 100%; }
	#cc .cbox form > input { width: 90%; }
}

@media screen and (max-width: 450px) {
	.menu > div.mn ul, .sm > div.mn ul { right: -68%; }
	#cc .cbox form > input { width: 95%; }
}

@media screen and (max-width: 400px) {
	.title_box { background-image: none; height: 252px; }
	.title_box h2 { background-size: 422px auto; height: 252px; line-height: 252px; width: 100%; }
	.menu > div.mn ul, .sm > div.mn ul { right: -66%; }
	#cc .cbox form > input { width: 100%; }
}