@charset "utf-8";
/* CSS Document */
@media screen and (min-width:600px) and (max-width:949px){
body {font-size: 1.6rem;text-size-adjust: 100%;
 　　-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
 　　-ms-text-size-adjust: 100%;/*EgdeMobile*/
 　　-moz-text-size-adjust: 100%;/*firefox*/}
			
			
.tabNone { display: none;}			
.pcnav { display: none;}
.dr-nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}

.menu-button { display: block; position: fixed; top: 20px; right: 20px; cursor: pointer;	z-index: 10000;}

.bar { display: block; width: 25px; height: 3px; margin: 5px 0; background-color: #F62062; transition: 0.4s;}

#menu-toggle:checked ~ .menu-button .bar:nth-child(1) { transform: rotate(45deg) translate(-2px, 3px);}

#menu-toggle:checked ~ .menu-button .bar:nth-child(2) { opacity: 0;}

#menu-toggle:checked ~ .menu-button .bar:nth-child(3) { transform: rotate(-45deg) translate(8px, -13px);}

#menu-toggle { display: none;}

.menu { position: fixed; top: -100%; left: 0; width: 100%; height:auto; background-color: #f3f3f3; transition: 0.4s; z-index: 6500; overflow-y: auto;}

#menu-toggle:checked ~ .menu { top: 0;}

.menu ul { list-style: none; padding: 20px;}

.menu ul li {border-bottom: dotted 1px #ccc;}

.menu ul li a { text-decoration: none; color: #333; font-size: 18px; display: block; padding: 15px 0 10px 0; transition: 0.2s;}

.menu ul li a:hover { color: #bf7497;}

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

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


section {width: 100%; height: auto; margin: 0 auto;position: relative;} 
h1 { /*color: #F62062;*/ color: #333; font-size:45px; font-weight: bold; padding: 0; position: absolute; top: 0; left: 50%; z-index: 1;width: 80%; height: auto; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
h1 a {color: #333;}
h1 span { font-size: 1.5rem; font-weight: bold; padding-left: 50px; position: absolute; top: 50px; left:50%; width: 70%; height: auto; z-index: 2;transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}

#container {width: 100%; height: auto; margin: 0 auto; padding-top: 200px;}
.contents01 {width: 100%; height: auto; position: relative;}
.contents01B, .contents01C  {width: 100%; height: auto; margin:170px 0 100px 0;}
.contents01B h2, .contents01C h2 { color: #333333; font-size: 4rem; padding-top: 450px;}
.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.2rem; font-weight: normal; line-height: 3rem; letter-spacing: 0.5rem; padding: 20px;}

.wscircle01 { background: #EAF6F6; width:230px; height: 230px; border-radius: 50%; position: absolute; top: -50px; left: 3%;  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 { background: #EAF6F6; width: 180px; height: 180px; border-radius: 50%; position: absolute; top: 230px; right: 10%; z-index: 5; border: solid 1px #86bec6;}
.wscircle02 h3 { position: absolute;  top: 47%; left: 50%; transform: translateX(-50%); z-index: 6; color: #248F9F; font-size: 2.5rem; width: 230px; height: auto; text-align: center; line-height:1.5rem; }
.wscircle02 h3 span {font-size: 1rem;}

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


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

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


.hp-more {width: 100%; height: auto; padding: 10px 0 0 0; z-index: 20;}
.hp-more h3 {font-size: 2rem; padding: 0;}
.hp-more img {width: 25%; padding: 0 20px 0 0;}

.hp-more02 {width: 100%; height: auto; padding: 10px 0 50px 0; margin-bottom: 50px;}
.hp-more02 h3 {font-size: 2rem; padding: 0;}
.hp-more02 img {width: 25%; padding: 0 20px 0 0;}

/*DTP*/
.contents02 {width: 100%; height: auto; padding: 0 0 0 0; position: relative; background: #ccc;}
.contents02B { width: 100%; height: auto; padding-top: 630px;}
.contents02B h2 { color: #333333; font-size: 4rem; text-align: left; margin-top: 20px;}
.contents02B h2 span { color: #248F9F; font-size: 2rem; padding-left: 20px;}
.wsbox02 { background: #248F9F; width: 100%; height: auto; text-align: right; }
.wsbox02 p { color: #fff; font-size: 1.5rem; font-weight: normal; padding: 20px; line-height: 3rem; letter-spacing: 0.5rem; text-align: left;}

.wscircle04 { background: #EAF6F6; width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 0px; left: 33%; transform: translateX(-50%); z-index: 10; border: solid 1px #86bec6;}
.wscircle04 h3 { position: absolute;  top: 45%; left: 50%; transform: translateX(-50%); z-index: 11; 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: 180px; height: 180px; border-radius: 50%; position: absolute; top: 210px; left: 45%; z-index: 12; border: solid 1px #86bec6;}
.wscircle05 h3 { position: absolute;  top: 40%; left: 50%; transform: translateX(-50%); z-index: 13; color: #248F9F; font-size: 3.2rem; width: 230px; height: auto; text-align: center; line-height:2rem; }
.wscircle05 h3 span {font-size: 1.2rem;}

.wscircle06 { background: #EAF6F6; width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 410px; right: 16%; z-index: 14; border: solid 1px #86bec6;}
.wscircle06 h3 { position: absolute;  top: 38%; left: 50%; transform: translateX(-50%); z-index: 15; color: #248F9F; font-size: 3.2rem; width: 230px; height: auto; text-align: center; line-height:2.5rem;}
.wscircle06 h3 span {font-size: 1.3rem; 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: auto; text-align: left;}
.wsbox03 p { color: #fff; font-size: 1.3rem; font-weight: normal; line-height: 3rem; letter-spacing: 0.5rem; margin: 0 auto; padding: 15px;}

/*works-------------*/
.works-area { margin-bottom: 100px;}
.works-area ul {margin-top: 80px; 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 { width: 90%; font-size: 1.5rem; margin-top: 5px;}
.about-area dl dt{ width: 100%; height: auto; padding: 20px; border-bottom: solid 1px #F62062; color: #F62062;}
.about-area dl dd{ width: 100%; height: auto; padding: 20px; border-bottom: solid 1px #ccc;}
.about-area dl dd a { color: #333;}


/*contact------------*/
.error_coution { color: #C51550;}
.contact-area {width: 96%; height: auto; margin: 0 auto;}
.contact-area p { font-size: 1.4rem; margin-top: 50px;}
.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; font-size: 1.4rem;}
.contact-area dl dt { width: 100%; 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: 100%; height: auto; vertical-align: top; margin: 20px 0 0 0; border-bottom: solid 1px #ccc; padding: 10px 0 10px 0px;} 
.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:0; text-align: center; width: auto; height: auto; cursor: pointer; font-size: 2rem;}
.contact-area button[type="submit"].submit02 { border-radius: 10px; border: solid 2px #F62062; background: #fadde6; color: #F62062; padding: 10px; margin: 0; text-align: center; width: auto; height: auto; cursor: pointer; font-size: 2rem;}

.contact-area button[type="button"].reset { border-radius: 10px; border: solid 2px #248F9F; background: #EAF6F6; color: #248F9F; padding: 10px; margin: 0 20px 0 0; text-align: center; width: auto; height: auto; cursor: pointer; font-size: 2rem; font-weight: bold;}
			}