/*------------------------normalize*/
* { box-sizing: border-box; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}a {background: transparent;}a:active,a:hover {outline: 0;}sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 0;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}button {overflow: visible;}button,select {text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer;}button[disabled],html input[disabled] {cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}input {line-height: normal;}input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}textarea {overflow: auto;}table {border-collapse: collapse; border-spacing: 0;}td,th {padding: 0;}
button{ border:none;}button:focus{ outline:none;}table { border-collapse: collapse; border-spacing: 0;}
/*------------------------normalizeEnd*/

body { font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; color:#000; margin:0 auto; text-align:center; line-height:1; font-size:100%; background:url("../img/bg_body.jpg")  center center;
}

main{ width:960px; margin:0 auto; line-height: 1.4em;}
h1, h2, h3, h4, h5, h6 { margin:0 0 1em; padding:0;font-size:1.2em;}
h2{ margin-bottom:20px;}
.title01, .title02, .title03, .title04{ padding: 10px; margin:20px 0; color: #fff; font-size: 1.2em; font-weight:normal; line-height: 1.2em; border: 1px dashed #cecece; border-radius: 4px;}
.title01{ background: #1bb9ab url("../img/titleBack.png"); box-shadow: 0 0 0 4px #1bb9ab, 2px 1px 6px 4px rgba(0, 0, 0, 0.5);}
.title02{ background: #35b7cb url("../img/titleBack.png") ; box-shadow: 0 0 0 4px #35b7cb, 2px 1px 6px 4px rgba(0, 0, 0, 0.5);}
.title03{ background: #fb6668 url("../img/titleBack.png"); box-shadow: 0 0 0 4px #fb6668, 2px 1px 6px 4px rgba(0, 0, 0, 0.5);}
.title04{ background: #8a7058 url("../img/titleBack.png"); box-shadow: 0 0 0 4px #8a7058, 2px 1px 6px 4px rgba(0, 0, 0, 0.5);}

.title05{ background:#ff8b00; color:#fff; padding:4px; font-size:14px;}


h3 { color:#e6778a;}
h4{position:relative; padding-left:25px; font-size:1em; font-weight:bold; margin:40px 0 20px; color:#666;}
h4:before{ position:absolute;top:-8px;left:7px;transform:rotate(45deg);height:12px;width:12px;background:#1bb9ab;content:"";}
h4:after{ position:absolute;top:8px;left:2px;transform:rotate(15deg);height:8px;width:8px;background:#1bb9ab;content:"";}
h5{ font-size:1em;}
p{}

article{ text-align:left; margin-bottom:40px;}
section{ margin-bottom:40px;}
address{ font-style:normal;}
a:link,a:visited{ text-decoration: none; color:#007ab0;}/*007ab0*/
a:hover{ color:#0099FF; opacity:0.6; transition:0.4s;}/*0099FF*/
area { outline:none; }

.box01{}
.box01 p{ color:#666;}
.box01 .boxLink{ display:block; color:#666; height:21em;}
.boxLink:hover{ opacity:0.8; transition:0.4s;}

/*------------------------Style*/
header { background:#fff;}
header h1{}

footer{ clear:both; margin-top:20px; width:100%; text-align:center; background:#fff;}
footer div{}/*background:#f6d0d0;*/
footer small { display:block; font-size:0.8em; width:960px; margin: auto; padding:160px 0 20px; text-align:right; color:#ff7d7f;}

/*------MENU*/
header nav{ float:right;}

#menu{ margin: 0 auto; padding: 0;}
#menu li{ display: block; float: left; margin: 0; padding: 0; }
#menu li a{ display: block; padding: 12px 0 10px; text-align: center; text-decoration: none; }
#toggle{ display: none; }


/*------*/
.flowBox{ margin:20px 0;}
.no{ color:#e6778a;}
.arrow1{ top:20px; bottom:10px; position:relative; width: 0; height: 0; border: 16px solid transparent; border-top-color: #e6778a;}
.arrow1:after{ position: absolute; content: ''; top: -32px; left: -8px; width: 16px; height: 16px; background: #e6778a;}


/*------*/
.logoBox{ clear:both; margin-bottom:20px;
background: #f4b8d2; /* Old browsers */
background: -moz-linear-gradient(left,  #f4b8d2 0%, #fff7a4 50%, #a5d3f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f4b8d2 0%,#fff7a4 50%,#a5d3f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f4b8d2 0%,#fff7a4 50%,#a5d3f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b8d2', endColorstr='#a5d3f2',GradientType=1 ); /* IE6-9 */
}
.mainImg{ margin-bottom:40px;}


/*------Box*/
.columnBox, .columnBox4{ margin-bottom:40px;}
.columnBox article{ box-sizing:border-box; float:left; width:300px; margin:0 10px;}

.columnBox4 section{ box-sizing:border-box; float:left; width:25%; padding:10px;}
.columnBox4 section div{ background:#fff; padding:10px; border:1px solid #ccc;}
.columnBox4 section div h3{ font-size:1em; margin-bottom:5px;}
.columnBox4 section img{ width:100%; height:auto;}
.girl, .girls dt, .girls h3{ color:#e6778a;}
.boy, .boys dt, .boys h3{ color:#35b7cb;}

.box01{ width:100%; margin-bottom:40px; padding:20px;  background:#fff url("../img/flag.png") no-repeat left top; border-radius:4px; box-shadow: 0 4px 4px rgba(0,0,0,0.2);}
.box01 .fR, .box02 .fR{ padding-left:1em;}
.img01{ margin:-30px -20px 0 0;}


/*------*/
.rating{}
.rating dt{ float:left; clear:left; padding-right:1em;}
.rating dd{ margin:0 0 20px;}

.rankUpBox{ margin:40px auto;}
.rankUpBox h5, .rankUpBox p{ text-align:center;}
.rankUpBox .rBox01{ background:#efefef;}
.rankUpBox .rBox { text-align:center;}



/*------*/
#Profil{ background:#fff; box-sizing:border-box; padding:10px; border-radius:8px;}

.girls h3, .boys h3{ font-size:30px; margin-bottom:10px;}

.profilePh{ float:left; width:45%; height:auto; margin-right:40px;}
.profilePh img{ width:100%; padding:1%; height:auto;}
.profilePh .halfPh{ width:50%; padding:1%; height:auto; float:left;}

.profileBox{ width:45%; float:left; font-size:0.8em; padding-top:10px;}
.profileBox dl{ margin-top:40px;}
.profileBox dt{}
.profileBox dd{ margin:10px 0 20px; padding-bottom:10px; border-bottom:1px dotted #666; font-size:16px;}


/*------btn*/
.btn01{ width:auto; margin:0 auto;}



.colorBox{ width:100%; text-align:center;}
.colorBox figure{ box-sizing:border-box; width:18%; height:auto; margin:1%; float:left;}
.colorBox figure img{ width:100%; height:auto;}
.colorBox figure figcaption{ font-size:10px;}

/*------form*/
form p{ font-size:0.8em; margin:0; padding:0;}
input[type="text"], input[type="file"], textarea{ border:none; margin:10px 0 20px; padding:10px; font-size:1em; color:#666; background:#eee; width:100%;}

input.btn { border:none; margin-bottom:20px; padding:5px 20px; border-radius:20px; height:40px; background:#2C918D; color:#fff;}


.file input[type="file"] { font-size:0.8em;}

.checkBox p{ margin-bottom:10px;}
.checkBox p span{ font-size:0.8em;}
.checkBox input[type="checkbox"]{ display:none;}
.checkBox{ margin-bottom:20px;}
.checkBox label { cursor: pointer; display: inline-block; height: 32px; position: relative;}
.checkBox label span { display: inline-block; height: 32px; line-height: 32px; position: relative;}
.checkBox label span:before, label span:after { border-bottom: 1px solid #2C918D; content: ""; left: 8px; position: absolute; top: 20px; width: 8px; z-index: 1; -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);      -o-transform: rotate(45deg);         transform: rotate(45deg);}
.checkBox label span:after { left: 10px; top: 15px; width: 24px; -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);      -o-transform: rotate(-45deg);         transform: rotate(-45deg);}
.checkBox label i { background: #eee; display: inline-block; height: 32px; margin-right: 16px; position: relative; vertical-align: top; width: 32px;}
.checkBox label span i:after { background: #eee; bottom: 0; content: ""; position: absolute; right: 0; top: 0; width: 32px; z-index: 2;}
.checkBox input:checked + span i:after { transition: width 0.2s ease-in 0s; width: 0;}


/*------table*/
.table01{ margin:0 auto 20px; padding:0; border-collapse: collapse; border-spacing: 0; font-size:13px; line-height:1.4em;}
.table01 th{ box-sizing:border-box; padding: 1em; text-align:center; vertical-align:middle; color:#333; background:#f5f5f5; border:1px solid #d6d6d6;}
.table01 td{ box-sizing:border-box; padding: 1em; background: #fff; border: 1px solid #d6d6d6;}

/*------pager*/
.pager { overflow: hidden;}
.pager ul { list-style: none; position: relative; left: 50%; float: left;}
.pager ul li { margin: 0 1px; position: relative; left: -50%; float: left;}
.pager ul li span,
.pager ul li a { display: block; font-size: 16px; padding: 0.6em 1em; border-radius: 3px;}
.pager ul li a { background: #EEE; color: #000; text-decoration: none;}
.pager ul li a:hover { background: #333; color: #FFF;}


/*------------------------otherStyle*/
.none{ display:none;}
.note{ font-size:0.8em; color:#666; margin:0; padding:0;}
.noteRed{ font-size:0.8em; color:red; margin:0; padding:0;}

.red{ color:red;}
.B{ font-weight: bold;}

.tR{ text-align:right;}
.tC{ text-align:center;}
.super{ vertical-align:super; font-size:0.5em;}
.italic{ font-style:italic;}
.serif{ font-family:Georgia, "Times New Roman", Times, serif;}


.fR{ float:right;}
.fL{ float:left;}

.figureR{ float:right; padding:0 0 3px 10px;}

.clear { clear:both; }
.cf:after, .columnBox:after, .box01:after, .box02:after{/*for modern browser*/ content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden;}
.cf, .columnBox, .box01, .box02 {zoom:1;/*for IE 5.5-7*/}


/*------pc*/
.PC{ display:block;}
.SP{ display:none;}
@media only screen and (max-width: 960px) {
.PC{ display:none;}
.SP{ display:block;}

main, footer small{ width:100%;}
.mainImg, .mainImg img{ width:100%; height:auto;}


article{ float:none; width:90%; margin:0 auto 40px;}
article h2 img{ width:300px; height:auto;}

.box01 .boxLink{ height:auto;}

.columnBox article{ float:none; margin:0 auto 40px; width:90%;}
.columnBox article h2 img{ width:300px; height:auto;}

.columnBox4 section{ width:50%;}

.logoBox{ margin-top:55px;}

header nav{ opacity:0.8; float:none; position: fixed; top: 0px; width:100%; background:#fff; z-index:1000;}
#toggle{ display: block; position: relative; width: 100%;  background: #fff;}
#toggle a{ display: block; position: relative; padding: 20px; border-bottom: 1px solid #eb1b92; color: #fff; background:#e4788b; text-align:right; text-decoration: none; }
#menu{ display: none; }
#menu li{ border-bottom: 1px solid #ccc; padding:10px 0; }
#menu li{ width: 100%; }
#menu li a{ background:#fff; color:#eb1b92;}

.table01{ width:100%; margin:0; padding:0; border:none;}
.table01 th, .table01 td{ border:none; width:100%; display:inline-block; margin: 5px 0; padding:10px;}
input[type="text"], textarea .widthS{ width:100%;}
}
@media only screen and (max-width: 769px) {
 .TBimg{ width:100%; height:auto;}
 .img01{ margin:0; padding:0;}
.box02 img{ width:100%; height:auto; margin:0; padding:0;}
.box02 .fR{ float:none; margin:0; padding:0;}

.profileBox{ float:none; width:100%;}
.profilePh{ float:left; width:100%; height:auto; margin:0 0 40px;}
.profileBox img{ width:auto;}

.colorBox figure{ width:48%; height:auto; margin:20px 1%;}

}
@media only screen and (max-width: 480px) {
img{ text-align:center;}
.SPimg{ width:100%; height:auto;}
.figureR{ float:none; padding:0; text-align:center;}

article{ float:none; width:90%; margin:0 auto 40px;}
article h2{ text-align:center;}
article h2 img{ width:90%; height:auto;}

.colorBox figure{ width:100%; height:auto; margin:20px 0; float:none;}

.columnBox article{ float:none; margin:0 auto 40px;}
.columnBox4 section{ float:none; width:100%; padding:10px;}
.fR{ float:none;}
}