@charset "utf-8";
/* CSS Document */
*{ margin:0;padding:0;}
html { margin: 0; padding: 0; font-size:62.5%;}
body {
  margin: 0;
 font-family: 'Josefin Sans', sans-serif;
		background: #e4dcd5;/*F8F6F2*/
		color: #333;
}
/* =Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
}
ul li { list-style: none;}
a { text-decoration:none; color: #248F9F;}
a:hover { opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter:"alpha(opacity=70)";}

img { max-width: 100%; height: auto;}
p { max-height: 100%;}

/*** 解像度の幅が900px以上 ***************************/
@media all and (min-width:950px), print{
body{-webkit-print-color-adjust:exact;}
.pcNone { display: none;}

.dr-nav {display: none;}

.pcnav {float: right;}
.pcnav li {float: left; color: #F62062; font-size: 15px; padding: 20px;}
.pcnav li a { color: #F62062;}


#wrapper {width: 100%; height: auto;}
footer { width: 100%; height: 100px; margin: 0 auto; padding: 300px 0 20px 0;}
address { font-style: normal; text-align: center; vertical-align: bottom; font-size: 1.2rem; line-height: 2.5rem; padding: 90px 0 10px 0;}

.pagetop{position:fixed;right:20px;bottom:0px;text-align:center;color:#F62062;text-decoration:none;margin:0;padding:0; z-index:100; font-size: 5rem;}
.pagetop a{color:#F62062;}
.pagetop a:hover{color:#F62062;}

section {width: 90%; height: auto; margin: 0 auto; clear: both; position: relative;} 
h1 { /*color: #F62062;*/ color: #333; font-size:120px; font-weight: normal; padding: 200px 0 0 0; position: absolute; top: 0; left: 50%; z-index: 1;width: 800px; height: auto; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
h1 a {color: #333;}
h1 span { font-size: 2.5rem; font-weight: bold; padding-left: 50px; position: absolute; top: 300px; left: 435px; width: auto; height: auto; z-index: 2;}

#container {width: 90%; height: auto; margin: 0 auto; padding-top: 650px;}
.contents01 {width: 100%; height: auto; position: relative;}
.contents01B { padding: 0 0 300px 0;}
.contents01C { padding: 0 0 50px 0;}
.contents01B h2, .contents01C h2 { color: #333333; font-size: 6rem;}
.contents01B h2 span, .contents01C h2 span { color: #248F9F;}
.contents01B h2 span.h2-contact, .contents01C h2 span.h2-contact {font-size: 3rem; color: #333333;}
.wsbox01 { background: #248F9F; width: 100%; height: auto; /*position: relative;*/}
.wsbox01 p { color: #fff; font-size: 1.7rem; font-weight: bold; /*position: absolute; top: 60px; left: 20px; z-index: 2;*/ line-height: 3.5rem; letter-spacing: 0.5rem; padding: 40px; width: 40%;}

.wscircle01 { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 3; border: solid 1px #86bec6;}
.wscircle01 h3 { position: absolute;  top: 45%; left: 50%; transform: translateX(-50%); z-index: 4; color: #248F9F; font-size: 3.4rem; width: 200px; height: auto; text-align: center; line-height:2rem; }
.wscircle01 h3 span {font-size: 1.5rem;}

.wscircle02, .wscircle02about { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: -100px; right: 10%; z-index: 5; border: solid 1px #86bec6;}
.wscircle02 h3, .wscircle02about h3 { position: absolute;  top: 45%; left: 50%; transform: translateX(-50%); z-index: 6; color: #248F9F; font-size: 3.4rem; width: 230px; height: auto; text-align: center; line-height:2rem; }
.wscircle02 h3 span, .wscircle02about h3 span {font-size: 1.5rem;}

.wscircle03, .wscircle03about { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 160px; right: 25%; z-index: 7; border: solid 1px #86bec6;}
.wscircle03 h3, .wscircle03about h3 { position: absolute;  top: 35%; left: 50%; transform: translateX(-50%); z-index: 8; color: #248F9F; font-size: 3.4rem; width: 230px; height: auto; text-align: center; line-height:3.3rem;}
.wscircle03 h3 span, .wscircle03about h3 span {font-size: 1.5rem; line-height: 2rem;}

.hp-more {width: 55%; height: 100px; padding: 10px 0 0 0; }
.hp-more h3 {font-size: 3rem; padding: 10px 0 0 30px;}
.hp-more img {width: 25%; padding: 0 20px 0 0; vertical-align: top;}

.hp-more02 {width: 35%; height: 100px; padding: 10px 0 0 0; float: right;}
.hp-more02 h3 {font-size: 3rem; padding: 10px 0 0 30px;}
.hp-more02 img {width: 25%; padding: 0 20px 0 0;}

.contents02 {width: 100%; height: auto; padding:0; position: relative; margin-top: 100px;}
.contents02B {}
.contents02B h2 { color: #333333; font-size: 6rem; text-align: right;}
.contents02B h2 span { color: #248F9F; font-size: 2rem; padding-left: 20px;}
.wsbox02 { background: #248F9F; width: 100%; height: 200px; /*position: relative; */text-align: right;}
.wsbox02 p { color: #fff; font-size: 1.7rem; font-weight: bold; /*position: absolute; top: 600px; right: 20px; z-index: 2;*/ line-height: 3.5rem; letter-spacing: 0.5rem; padding: 40px;}

.wscircle04 { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top:-110px; right: 40%; transform: translateX(-50%); z-index: 9; border: solid 1px #86bec6;}
.wscircle04 h3 { position: absolute;  top: 45%; left: 50%; transform: translateX(-50%); z-index: 10; color: #248F9F; font-size: 3.4rem; width: 200px; height: auto; text-align: center; line-height:2rem; }
.wscircle04 h3 span {font-size: 1.5rem;}

.wscircle05 { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: -40px; left: 5%; z-index: 11; border: solid 1px #86bec6;}
.wscircle05 h3 { position: absolute;  top: 45%; left: 50%; transform: translateX(-50%); z-index: 12; color: #248F9F; font-size: 3.4rem; width: 230px; height: auto; text-align: center; line-height:2rem; }
.wscircle05 h3 span {font-size: 1.5rem;}

.wscircle06 { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 150px; left: 25%; z-index: 13; border: solid 1px #86bec6;}
.wscircle06 h3 { position: absolute;  top: 38%; left: 50%; transform: translateX(-50%); z-index: 14; color: #248F9F; font-size: 3.4rem; width: 230px; height: auto; text-align: center; line-height:2.5rem;}
.wscircle06 h3 span {font-size: 1.5rem; line-height: 2rem;}


.contents03 {width: 100%; height: auto; padding: 200px 0 0 0;}
.contents03 h2 { color: #333333; font-size: 6rem; text-align: right;}
.contents03 h2 span { color: #248F9F; padding-left: 20px;}
.wsbox03 { background: #248F9F; width: 100%; height: 280px; position: relative; text-align: right;}
.wsbox03 p { color: #fff; font-size: 1.4rem; font-weight: normal; position: absolute; top: 60px; right: 20px; z-index: 2; line-height: 3rem; letter-spacing: 0.5rem; width: 80%;}


/*works-------------*/
.works-area {margin-bottom: 300px;}
.works-area ul {margin-top: 200px; display: table;}
.works-area ul li {width: 25%; height: auto; display: table-cell; text-align: center; vertical-align: top;}
.works-area ul li img {width: 50%; height: auto; padding: 20px; border: dotted 2px #ccc;}

/*about--------------*/
.about-area dl { display: flex; flex-wrap: wrap; width: 70%; font-size: 1.5rem; margin-top: 50px;}
.about-area dl dt{ width: 12%; height: auto; padding: 25px; border-bottom: solid 1px #F62062; font-weight: bold;}
.about-area dl dd{ width: 67%; height: auto; padding: 25px; border-bottom: solid 1px #ccc;}


/*contact------------*/
.error_coution { color: #C51550;}
.contact-area {width: 65%; height: auto; margin: 0 0 50px 0;}
.contact-area p { font-size: 1.4rem; margin: 50px 0 0 0;}
.contact-area dl dt span.red { color: #C51550; font-size: 2rem; padding-left: 5px;}
.contact-area dl dt span {font-size: 1.2rem; padding-left: 5px;}
.contact-area dl { width: 100%; height: auto; display: flex; flex-wrap: wrap; font-size: 1.4rem;}
.contact-area dl dt { width: 20%; height: auto; margin: 20px 0 0 0; vertical-align: top; border-bottom: solid 1px #F62062; padding: 10px 0 10px 0;} 
.contact-area dl dd { width: 70%; height: auto; vertical-align: top; margin: 20px 0 0 0; border-bottom: solid 1px #ccc; padding: 10px 0 10px 30px;} 
.contact-area dl dt.dt-contact, .contact-area dl dd.dd-contact {border: none;}
.contact-area dl dd input[type="text"] { margin: 0 10px 5px 10px; padding: 5px; border: dotted 2px #ccc;}
.contact-area dl dd textarea { padding: 5px; margin: 0 0 10px 0; border: dotted 2px #ccc;}
.contact-area dl dd input[type="radio"] { border: dotted 2px #ccc; margin: 0 10px 5px 10px; padding: 5px;}
.contact-area button[type="submit"] { border-radius: 10px; border: solid 2px #248F9F; background: #EAF6F6; color: #248F9F; padding: 10px; margin: 40px 0 0 0; text-align: center; width: auto; height: auto; cursor: pointer;}
.contact-area button[type="submit"].submit02 { border-radius: 10px; border: solid 2px #F62062; background: #fadde6; color: #F62062; padding: 10px; margin: 40px 0 0 0; text-align: center; width: auto; height: auto; cursor: pointer;}
.contact-area button[type="button"].reset { border-radius: 10px; border: solid 2px #248F9F; background: #EAF6F6; color: #248F9F; padding: 10px; margin: 40px 20px 0 0; text-align: center; width: auto; height: auto; cursor: pointer;}

#error401 {width: 80%;height: auto; margin: 0 auto; font-size: 2rem; padding-top: 150px;}

}