@charset "utf-8";
/* @group Reset */
* {
margin: 0;
padding: 0
}
a {
text-decoration: underline;
}
a:hover {
color: #aaa;
}
ul, ol {
list-style: none
}
img {
vertical-align: middle;
transition: 0.5s;
}
a img:hover {
opacity: 0.6;
transition: 0.5s;
}
img {
width : 100%
}
/* @group HTML */
html {
font-family: Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif, verdana, sans-serif;
font-size: 75%;
color: #000;
margin-left: auto;
}
#wrapper {
width: 100%;
max-width: 1024px;
margin: auto;
}
#main_header {
padding: 0;
background-color: #fff;
background-image: url("../images/header_bg.png");
background-size: 3%;
height: 30px;
}
#submenu {
background-color: #c5e6f1;
overflow: hidden
}
#submenu ul {
width: 70%;
margin: auto;
position: relative;
}
#submenu ul li {
width: 16%;
padding: 3% 8.2%;
float: left;
border-right: 1px dotted #7b6b5b;
}
#submenu ul li:nth-child(1) {
border-left: 1px dotted #7b6b5b;
}
#sect02 {
background-image: url("../images/sect02_bg.gif");
background-size: cover;
overflow: hidden;
/* height: 100vh; */
}
#sect03 {
background-image: url("../images/sect03_bg.gif");
background-repeat: no-repeat;
background-size: 100%;
/* height: 100vh; */
margin: -15% 0 10% 0;
z-index: 1;
position: relative;
}
#sect04 {
background-image: url("../images/sect04_bg.gif");
background-size: 90%;
/* height: 80vh; */
margin: -15% 0 0 0;
padding-bottom: 15%;
/* z-index: -1; */
}
#sect05 {
margin:  auto;
background-color: #fff;
background-image: url("../images/member_bg.svg");
background-size: 20%;
background-repeat: no-repeat;
}
#sect06 {
margin: 0 auto;
padding: 5% 0 5% 0;
background-color: #f9ede9;
background-image: url("../images/youtube_bg.svg");
background-size: 15%;
background-position: top right;
background-repeat: no-repeat;
}
#sect05 .title, #sect06 .title, #sect07 .title {
width: 45%;
margin: auto;
}
.youtube_window {
width: 70%;
height: 350px;
margin: -3% auto 0;
display: block;
}
.youtube_text {
margin: 5% auto 0;
font-size: 1.4em;
font-weight: 700;
display: block;
}
#sect07 {
margin: 0 auto;
padding: 5% 0 10%;
background-color: #fffde8;
background-image: url("../images/sns_bg.svg");
background-size: 15%;
background-position: top 10%;
background-repeat: no-repeat;
}
#sect07 ul {
width: 90%;
margin: auto;
text-align: center;
}
#sect07 ul li {
width: 13.3%;
margin: 5%;
display: inline-block;
}
.youtube_area {
width: 90%;
margin: auto;
}
.youtube_window {
width: 100%;
height: 400px;
margin: auto;
}
.youtube_text {
margin: 5% auto 0;
font-size: 1.0em;
font-weight: 700;
}
.sect_last {
z-index: 2;
position: relative;
}
ul.flex {
width: 50%;
margin: 5% auto 0%;
overflow: hidden;
}
ul.flex li {
width: 20%;
float: left;
box-sizing: border-box;
}
ul.flex2 {
text-align: center;
width: 80%;
padding: 3% 0 0;
margin: auto 10%;
overflow: hidden;
}
ul.flex2 li {
width: 7%;
margin: 0 2.75%;
float: left;
box-sizing: border-box;
}
#main_area {
background-color: #f9eef1;
height: auto;
width: 100%;
max-width: 1024px;
overflow: hidden;
position: relative;
}
.box_center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.box_teens {
width: 150px;
margin-top: 25%;
z-index: 2;
}
.box_7th {
position: absolute;
width: 150px;
margin-top: 36%;
z-index: 2;
}
.box_left {
position: absolute;
top: 0;
left: 0;
}
.model_area img {
height: 100%;
width: auto;
}
.box_left1 {
height: 280px;
margin: 10px 0 0 10%;
z-index: 2;
}
.box_left2 {
height: 280px;
margin: 150px 0 0 0%;
z-index: 2;
}
.box_right {
position: absolute;
right: 0;
}
.box_right1 {
height: 280px;
margin: 10px 10% 0 0;
z-index: 2;
}
.box_right2 {
height: 280px;
margin: 150px 2% 0 0;
z-index: 2;
}
.box_right3 {
/* bottom: 0; */
height: 200px;
width: 297.333px;
z-index: 2;
margin: auto;
text-align: center;
}
.kazari_right1 {
height: 20%;
margin: 5% 10% 0 0;
}
.kazari_right2 {
height: 30%;
margin: 40% -5% 0 0;
z-index: 1;
}
.kazari_right3 {
height: 16%;
margin: 40% 0 0 25%;
}
.kazari_right4 {
height: 12%;
margin: 8% 0 0 10%;
}
.box_bottom {
position: absolute;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 2;
margin: auto;
}
.box_main {
z-index: 0;
}
/* モデルエリア調整 */
/* 古園井 寧々 */
.nene {
background-image: url("../images/nene/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_nene {
background-color: #ef8fab;
}
.nene03 {
position: absolute;
width: 32%;
top: 5%;
right: 0%;
z-index: 2;
}
/* 瀬川 陽菜乃 */
.hinano {
background-image: url("../images/hinano/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_hinano {
background-color: #e8683f;
}
.hinano03 {
position: absolute;
width: 32%;
top: 5%;
left: 0%;
z-index: 2;
}

/* 長浜 広奈 */
.hina {
background-image: url("../images/hina/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_hina {
background-color: #fbe144;
}
.hina03 {
position: absolute;
width: 35%;
top: 5%;
right: 1%;
z-index: 2;
}

/* 矢野 滴 */
.shizuku {
background-image: url("../images/shizuku/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_shizuku {
background-color: #9e5ba1;
}
.shizuku03 {
position: absolute;
width: 27%;
top: 5%;
left: 3%;
z-index: 2;
}

/* 藤田 みあ */
.mia {
background-image: url("../images/mia/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_mia {
background-color: #73caf3;
}
.mia03 {
position: absolute;
width: 26%;
top: 5%;
right: 3%;
z-index: 2;
}

/* 川島 梨々花 */
.ririka {
background-image: url("../images/ririka/member_bg.png");
background-size: cover;
background-repeat: repeat-y;
position: relative;
}
.color_ririka {
background-color: #41b580;
}
.ririka03 {
position: absolute;
width: 33%;
top: 7%;
left: 3%;
z-index: 2;
}

.member_areaL,
.member_areaR {
width: 100%;
height: 420px;
padding: 0%;
overflow: hidden;
margin: 0 auto 5%;
}
.model_name {
color: #fff;
font-size: 1.4em;
font-weight: bold;
display: inline-block;
padding: 0;
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.model_name span {
font-size: 0.6em;
font-feature-settings: "palt";
}
.prof {
width: 100%;
padding: 2%;
box-sizing: border-box;
}
.prof p {
background-color: #fff;
text-align: justify;
font-size: 1.2em;
line-height: 1.6em;
font-feature-settings: "palt";
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.mia .prof p,
.ririka .prof p {
line-height: 1.3em;
}
.name {
padding: 2% 2% 0 2%;
width: 75%;
box-sizing: border-box;
}
.member_areaL .name {
margin: 20px 30% 0 0;
}
.member_areaL .prof p {
padding: 3% 40% 3% 2%;
}
.member_areaR .name {
margin: 20px 0 0 30%;
box-sizing: border-box;
}
.member_areaR .prof p {
padding: 3% 2% 3% 40%;
}
.model01 {
position: absolute;
height: 95%;
width: auto;
bottom: 10px;
right: 5%;
opacity: 0;
}
.model02 {
position: absolute;
height: 95%;
bottom: 10px;
right: 35%;
opacity: 0;
}
.member_areaL .model01 {
left: 10%;
}
.member_areaL .model02 {
/* left: 35%; */
}
.model01 img,
.model02 img {
height: 100%;
width: auto;
}
.model_name {
color: #fff;
font-weight: 700;
padding-top: 2px;
margin: 0;
}
@media screen and (max-width : 768px) {
#submenu ul {
width: 100%;
}
.member_areaL,
.member_areaR {
height: 300px;
margin: 0 auto 5%;
}
.prof p {
font-size: 0.9em;
line-height: 1.2em;
}
.mia .prof p,
.ririka .prof p {
line-height: 1.2em;
font-size: 83%;
}
.member_areaL .prof p {
padding: 3% 35% 3% 2%;
}
.member_areaR .prof p {
padding: 3% 2% 3% 35%;
}

/* モデル調整 */
.nene03 {
width: 35%;
top: 5%;
right: 0%;
}
.hinano03 {
width: 35%;
top: 5%;
left: 0%;
}
.hina03 {
width: 35%;
top: 5%;
right: 3%;
}
.shizuku03 {
width: 32%;
top: 5%;
left: 0%;
z-index: 2;
}
.mia03 {
width: 30%;
top: inherit;
top: 5%;
right: 3%;
}
.ririka03 {
width: 35%;
top: 5%;
left: 0%;
}
}