@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
.areaInner{
width:90%;
margin:0 auto 65px;
max-width:1300px;
position:relative;
}
.areaInner.w980{
max-width:980px;
}
.areaTtl{
text-align:center;
color:#ff5abe;
font-size:229%;
letter-spacing:1px;
margin-bottom:50px;
}
@media screen and (max-width:640px){
.areaTtl{
font-size:18pt;
margin-bottom:10px;
}
}
.areaTtl .ttl-in{
position:relative;
display:inline-block;
padding:0 20px;
}
.areaTtl .img{
width:100%;
height:2em;
position:absolute;
top:0.95em;
left:0;
background:url(../images/common/wave.gif) no-repeat center top;
background-size:286px;
}
@media screen and (max-width:640px){
.areaTtl .img{
background-size:200px;
}
}
.areaTtl .jp{
display:block;
font-size:56%;
color:#4d4d4d;
margin-bottom:25px;
}
@media screen and (max-width:640px){
.areaTtl .jp{
font-size:9pt;
}
}
.areaTtl .en{
font-size:63%;
display:block;
}
.headline{
font-size:229%;
text-align:center;
color:#ff5abe;
margin-bottom:20px;
line-height:1.4;
}
@media screen and (max-width:980px){
.headline{
font-size:180%;
}
}
@media screen and (max-width:640px){
.headline{
font-size:13pt;
}
}
.note-center{
text-align:center;
line-height:2.3;
}
/* arrow */
.arrow{
display:block;
width:35px;
height:35px;
margin:0 auto;
border-left:2px solid #ff5abe;
border-bottom:2px solid #ff5abe;
border-bottom-left-radius:10px;
-webkit-transform: translateY(0) rotate(135deg);
transform: translateY(0) rotate(135deg);
}
@media screen and (max-width:640px){
.arrow{
width:20px;
height:20px;
margin:0 auto;
border-bottom-left-radius:5px;
}
}

/*---------------------------------------*/
/* ABOUT */
/*---------------------------------------*/
#about .areaInner .areaTtl{
margin:3% 0 0;
}
#about .image{
width:49%;
}
@media screen and (max-width:980px){
#about .image{
width:80%;
float:none;
margin:0 auto 40px;
}
}
@media screen and (max-width:640px){
#about .image{
width:100%;
}
}
#about .image-right{
margin-top:-5%;
}
@media screen and (max-width:1300px){
#about .image-right{
margin-top:0;
}
}
#about .image .map{
width:100%;
padding-top:77%;
position:relative;
border-radius:95px;
overflow:hidden;
}
@media screen and (max-width:640px){
#about .image .map{
border-radius:55px;
}
}
#about .image .map #map_canvas1,
#about .image .map #map_canvas2,
#about .image .map #map_canvas3,
#about .image .map #map_canvas4{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#about .box{
position:absolute;
left:0;
top:0;
text-align:center;
width:45%;
}
@media screen and (max-width:980px){
#about .box{
position:static;
width:100%;
}
}
#about .box-right{
margin-left:55%;
}
#about .box-left{
margin-right:55%;
}
@media screen and (max-width:980px){
#about .box-right,
#about .box-left{
margin:0;
}
}
#about .info{
display:inline-block;
text-align:left;
}
#about .address{
position:relative;
white-space:nowrap;
}
@media screen and (max-width:980px){
#about .address{
padding-bottom:5px;
}
}
#about .svg-box{
display:inline-block;
margin:0;
vertical-align:bottom;
}
#about .info table th{
padding-right:20px;	
}
#about .notice{
color:#ff5abe;
font-size:93%;
padding-top:20px;
line-height:1.4;
}
#about .line{
position:absolute;
left:50%;
width:30%;
height:0;
border-bottom:2px dotted #ff5abe;
}
#about .line-right{
top:18%;
margin-left:-16%;
-webkit-transform:translateY(0) rotate(-5deg) !important;
transform:translateY(0) rotate(-5deg) !important;
}
#about .line-left{
top:20%;
margin-left:-13%;
-webkit-transform:translateY(0) rotate(5deg) !important;
transform:translateY(0) rotate(5deg) !important;
}
/*---------------------------------------*/
/* MEDIA */
/*---------------------------------------*/
#media .bx-viewport{
max-width:470px;
margin:0 auto;
}
#media .date{
text-align:center;
font-size:129%;
margin-top:50px;
}
@media screen and (max-width:640px){
#media .date{
font-size:11pt;
}
}
/*---------------------------------------*/
/* BLOG */
/*---------------------------------------*/
/* BLOG/MEDIA共通 */
.category-list .areaTtl{
font-size:143%;
}
@media screen and (max-width:640px){
.category-list .areaTtl{
font-size: 18pt;
}
}
.category-list ul{
width:100%;
max-width:960px;
margin:0 auto;
}
.category-list ul li{
width:14.28%;
text-align:center;
display:inline;
float:left;
}
@media screen and (max-width:980px){
.category-list ul li.ttl{
width:100%;
}
.category-list ul li.ttl .areaTtl{
margin-bottom: 20px;
}
.category-list ul li{
width:16.6%;
}
}
@media screen and (max-width:640px){
.category-list ul li{
width:33.2%;
}
}
#media .category-list ul{
max-width:640px;
}
#media .category-list ul li{
width: 25%;
}
#media .category-list ul.news li,
#news .category-list ul.news li{
width: 20%;
}
@media screen and (max-width:980px){
#media .category-list ul li.ttl,
#media .category-list ul.news li.ttl,
#news .category-list ul.news li.ttl{
width:100%;
}
#media .category-list ul li{
width:33.33%;
}
#media .category-list ul.news li:nth-child(2),
#news .category-list ul.news li:nth-child(2){
width:16%;
}
#media .category-list ul.news li:nth-child(3),
#news .category-list ul.news li:nth-child(3){
width:34%;
}
#media .category-list ul.news li:nth-child(4),
#news .category-list ul.news li:nth-child(4){
width:22%;
}
#media .category-list ul.news li:last-child,
#news .category-list ul.news li:last-child{
width:28%;
}
}
.category-list ul li a{
font-size:129%;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
@media screen and (max-width:640px){
.category-list ul li a{
font-size:9pt;
}
}
.category-list ul li a:hover{
background:#ff5abe;
}
.category-list ul li.on a{
background:#ff5abe;
}
/* BLOG/NEWS共通 */
.entry-content{
max-width:960px;
margin:0 auto;
text-align:center;
padding-bottom:100px;
border-bottom:2px dotted #ff5abe;
}
.entry-content .date{
font-size:129%;
letter-spacing:1px;
}
@media screen and (max-width:640px){
.entry-content .date{
font-size:11pt;
}
}
.entry-content img{
max-width:100%;
height:auto;
}
.entry-bottom{
max-width:960px;
margin:0 auto;
padding-bottom: 65px;
border-bottom:2px dotted #ff5abe;
}
@media screen and (max-width:980px){
.entry-bottom .blog-list li:nth-child(4){
display:none;
}
}
@media screen and (max-width:640px){
.entry-bottom .blog-list li:nth-child(3){
display:none;
}
}
/* BLOGカテゴリー */
.blog-list li{
width:22%;
margin-right:4%;
margin-bottom:30px;
display:inline;
float:left;
position:relative;
}
.blog-list li a{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
@media screen and (max-width:980px){
#blog .blog-list li{
width:30%;
margin-right:5%;
}
}
@media screen and (max-width:640px){
#blog .blog-list li{
width:45%;
margin-right:5%;
}
}
#blog .blog-list li:nth-child(4n){
margin-right:0;
}
@media screen and (max-width:980px){
#blog .blog-list li:nth-child(4n){
margin-right:5%;
}
#blog .blog-list li:nth-child(3n){
margin-right:0;
}
}
@media screen and (max-width:640px){
#blog .blog-list li:nth-child(3n){
margin-right:5%;
}
#blog .blog-list li:nth-child(2n){
margin-right:0;
}
}
#blog .blog-list li img{
width:100%;
height:auto;
}
#blog .blog-list li .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#blog .blog-list li .cover img{
position:absolute;
top:0;
left:0;
}
#blog .blog-list li .cover img.on{
opacity:0;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
#blog .blog-list li:hover .cover img.on{
opacity:1;
}
#blog .blog-list li .box{
position:absolute;
top:0;
left:0;
width:60%;
height:60%;
text-align:center;
color:rgba(255,255,255,0);
padding:20%;
font-size:88%;
background:rgba(255, 90, 190,0);
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
#blog .blog-list li:hover .box{
background:rgba(255, 90, 190,0.8);
color:rgba(255,255,255,1);
}
@media screen and (max-width:980px){
#blog .blog-list li .box{
width:80%;
height:80%;
padding:10%;
}
}
@media screen and (max-width:640px){
#blog .blog-list li .box{
font-size:8pt;
}
}
#blog .blog-list li .box span{
display:block;
}
#blog .blog-list li .box span.line{
line-height:0;
margin:5px 0;
}
#blog .blog-list li .box span.note-center{
line-height:1.6;
}
@media screen and (max-width:640px){
#blog .blog-list li .box span.note-center{
padding-top:10px;
}
}
.entry-bottom .blog-list li .box span.date{
margin-top:20%;
}
@media screen and (max-width:640px){
#blog .entry-bottom .blog-list li .box span.note-center{
padding-top:0;
}
}

/*---------------------------------------*/
/* NEWS */
/*---------------------------------------*/
/* NEWS/MEDIA共通 */
.enty-list{
margin-bottom:60px;
padding-bottom:60px;
border-bottom:2px dotted #ff5abe;
position:relative;
min-height:338px;
}
@media screen and (max-width:980px){
.enty-list{
min-height:inherit;
}
}
.enty-list .image{
width:26%;
position:absolute;
left:0;
top:0;
padding-top:26%;
}
@media screen and (max-width:980px){
.enty-list .image{
position:static;
width:100%;
max-width:470px;
margin:0 auto 20px;
float:none;
padding-top:0;
}
}
.enty-list .image img{
position:absolute;
left:0;
top:0;
width:100%;
height:auto;
}
@media screen and (max-width:980px){
.enty-list .image img{
position:static;
}
}
.enty-list .box{
text-align:center;
width:45%;
}
@media screen and (max-width:980px){
.enty-list .box{
width:100%;
}
}
.enty-list .box-right{
margin-left:35%;
}
@media screen and (max-width:980px){
.enty-list .box-right{
margin:0;
}
}
.enty-list .box-right .date{
font-size:129%;
}
@media screen and (max-width:640px){
.enty-list .box-right .date{
font-size:11pt;
}
}
/*---------------------------------------*/
/* loading */
/*---------------------------------------*/
#infscr-loading{
bottom: -50px;
display: block;
left: 50%;
margin-left: -71px;
position: absolute;
width: 143px;
}
#infscr-loading img{
width:100%;
height:auto;
}
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
#contact .note-center a{
text-decoration:underline;
}
#contact .note-center a:hover{
text-decoration:none;
}
#contact .attentionOuter{
width:100%;
text-align:center;
}
#contact .attention{
max-width:100%;
margin:30px auto;
padding:20px 5%;
border:1px solid #eaeaea;
display:inline-block;
text-align:left;
}
@media screen and (max-width:640px){
#contact .attention{
margin:30px auto 0;
}
}
#form{
max-width:960px;
margin:0 auto;
width:90%;
}
@media screen and (max-width:640px) {
#form{
width:100%;
}
}
#form dt{
width:21%;
font-size:129%;
}
@media screen and (max-width:980px) {
#form dt{
width:100%;
margin-bottom:10px;
font-size:11pt;
}
}
#form dd{
width:77%;
margin-bottom:20px;
}
@media screen and (max-width:980px) {
#form dd{
width:100%;
}
}
#form dd .clear{
margin:20px 0;
}
#form dd .clear .blockLeft{
width:49%;
margin-right:1%;
}
@media screen and (max-width:640px) {
#form dd .clear .blockLeft{
width:100%;
margin-right:0%;
float:none;
margin-bottom:20px;
}
}
.txt-l, .txt-s, .txt-area {
border:1px solid rgba(198,198,198,0.1);
background:rgba(198,198,198,0.1);
border-radius: 0;
font-size: 100%;
height:40px;
padding-left: 4%;
width: 95%;
-webkit-appearance: none;
color:#999999;
}
.txt-s {
padding-left: 2%;
width: 18%;
}
@media screen and (max-width: 640px) {
.txt-s {
padding-left: 4%;
width: 80%;
}
}
.txt-area {
height: 180px;
padding:10px 0 10px 4%;
}
#form input:focus, #form textarea:focus, #form select:focus {
border: 1px solid rgba(198,198,198,0.5);
}
div.wpcf7-validation-errors {
border: 2px solid #ff5abe !important;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #ff5abe;
}
div.wpcf7-response-output {
margin-left: 30px !important;
margin-right: 30px !important;
margin-top: 0 !important;
text-align: center;
}
#form span.notes {
color: #a7a7a7;
font-size: 96%;
font-weight: normal;
}
@media screen and (max-width: 640px) {
#form span.notes {
display: block;
font-size: 9pt;
}
}
#form .agree{
text-align:center;
margin-top:30px;
}
#btnSubmit{
text-align:center;
}
#btnSubmit .wpcf7-submit{
margin:30px auto;
-webkit-appearance: none;
border-radius:20px;
background:#ff5abe;
border:2px solid #ff5abe;
width:140px;
height:40px;
color:#fff;
font-size:129%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width: 640px) {
#btnSubmit .wpcf7-submit{
font-size: 11pt;
}
}
#btnSubmit .wpcf7-submit:hover{
background:none;
color:#ff5abe;
}
#form .customSelect{
background: url(../images/page/select.png) no-repeat right center rgba(198,198,198,0.1);
background-size: 41px 40px;
height:40px;
line-height:40px;
width:300px;
border:none;
cursor:pointer;
}
#form .customSelectInner{
width:96% !important;
padding: 0 0 0 4%;
}
.wpcf7-form-control input[type=radio]{
margin-right:5px;
}
.wpcf7-form-control-wrap input[type=checkbox]{
margin-right:5px;
}
/*---------------------------------------*/
/* privacy */
/*---------------------------------------*/
#privacy .areaInner{
max-width:960px;
text-align:center;
}
#privacy .areaInner .ttl{
font-size:129%;
}
@media screen and (max-width: 640px) {
#privacy .areaInner .ttl{
font-size: 11pt;
}
}
#privacy .line{
width:20px;
margin:0 auto;
height:1px;
background:#ff5abe;
}
/*---------------------------------------*/
/* recruit */
/*---------------------------------------*/
.recruitList{
text-align:center;
position:relative;
margin-bottom:200px;
}
@media screen and (max-width:640px){
.recruitList{
margin-bottom:100px;
}
}
.recruitList .image{
width:50%;
}
@media screen and (max-width:980px){
.recruitList .image{
width:80%;
float:none;
margin:0 auto 40px;
}
}
@media screen and (max-width:640px){
.recruitList .image{
width:100%;
}
}
.recruitList .image .img{
position:relative;
}
.recruitList .image .menu-mask{
position:relative;
padding-top:75.22%;
}
.recruitList .image .img img{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
z-index:10;
}
.recruitList .image .bg-dot{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
background:url(../images/common/dot-img.png) fixed 0 0;
z-index:9;
-webkit-animation: bgscroll 25s linear infinite;
animation: bgscroll 25s linear infinite;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width:640px){
.recruitList .image .bg-dot{
opacity:1;
}
}
@-webkit-keyframes bgscroll {
0% {background-position: 0 0;}
100% {background-position: 500px 0;}
}
@keyframes bgscroll {
0% {background-position: 0 0;}
100% {background-position: 500px 0;}
}
.recruitList .image:hover .bg-dot{
opacity:1;
}
.recruitList .image .box{
position:absolute;
bottom:18%;
left:0;
text-align:center;
width:100%;
}
@media screen and (max-width:980px){
.recruitList .image .box{
bottom:23%;
}
}
@media screen and (max-width:640px){
.recruitList .image .box{
bottom:auto;
top:-8%;
}
}
.recruitList .image .box .ttl{
font-size:518%;
color:#ff5abe;
margin: 25% 0 20px;
line-height: 1;
}
@media screen and (max-width:640px){
.recruitList .image .box .ttl{
font-size:30pt;
margin: 25% 0 10px;
}
}
.recruitList .image .box .more{
font-size:128%;
color:#4d4d4d;
}
@media screen and (max-width:640px){
.recruitList .image .box .more{
font-size:11pt;
}
}
.recruitList .image .box .btn-arrow{
background: url(../images/page/arrow.png) no-repeat;
width:50px;
height:50px;
margin:30px auto 0;
background-size: 50px 50px;
-webkit-transform: translateY(0) rotate(-90deg);
transform: translateY(0) rotate(-90deg);
}
@media screen and (max-width:640px){
.recruitList .image .box .btn-arrow{
width:30px;
height:30px;
margin:15px auto 0;
background-size: 30px 30px;
}
}
#recruit.page{
padding:200px 0 50px;
}
@media screen and (max-width: 640px) {
#recruit.page{
padding:50px 0 0;
}
}
#recruit.page .areaInner .line {
width: 20px;
margin: 85px auto 0;
height: 1px;
background: #ff5abe;
}
@media screen and (max-width: 640px) {
#recruit.page .areaInner .line {
margin:30px auto 0;
}
}
#form .ttl{
text-align: center;
font-size: 128.5%;
margin-bottom: 80px;
}
@media screen and (max-width:980px) {
#form .ttl{
text-align: center;
font-size:15px;
margin-bottom:30px;
}
}
#recruit.page #form dd{
font-size: 129%;
}
@media screen and (max-width:980px) {
#recruit.page #form dd{
font-size:11pt;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
}
#recruit.page .btn a{
display:block;
text-align:center;
margin:30px auto;
-webkit-appearance: none;
border-radius:20px;
background:#ff5abe;
border:2px solid #ff5abe;
width:170px;
height:40px;
line-height:40px;
color:#fff;
font-size:129%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
@media screen and (max-width: 640px) {
#recruit.page .btn a{
font-size: 11pt;
width:100%;
}
}
#recruit.page .btn a:hover{
background:none;
color:#ff5abe;
}
#recruit.contactform{
padding-top:200px;
}
@media screen and (max-width: 640px) {
#recruit.contactform{
padding-top:50px;
}
}
#recruit.contactform #form dd.text{
font-size: 129%;
}
@media screen and (max-width:980px) {
#recruit.contactform #form dd.text{
font-size:11pt;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
}