@charset "UTF-8";

/*=================================================================================
	 Base
	 =================================================================================== */

body {
	font-family: serif, sans-serif;
	font-size: 62.5%;
	font-weight: 300;
	font-style: normal;
	line-height: 1.5;
	color: #333333;
	margin: 0;
	padding: 0;
	width: 100%;
}

.center {
	text-align: center;
}

a {
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

/*=================================================================================
	 Header
	 =================================================================================== */
.header {
	width: 100%;
}

.header-top_logo {
	width: 20%;
	margin: 3vw auto 0;
}
.header-top_logo img {
	width: 100%;
}

.header-logo {
	width: 10%;
	margin: 3vw auto 0;
}
.header-logo img {
	width: 100%;
}

.header-insta {
	width: 5%;
	margin: -5vw 2vw 1vw auto;
}
.header-insta img {
	width: 100%;
}

/*=================================================================================
	 Top page
	 =================================================================================== */

/*-----スライドショー設定 --------------------------------*/
.main_wrap {
	position: relative;
	width: 100%;
	height: 650px; /*元は450*/
	overflow: hidden;
	display: flex;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.main_wrap {
		height: 400px;
	}
}

.slide-bg {
	position: absolute;
	width: 100%;
	height: auto;
}

/* スライドの画像設定 */
.loop_slide {
	display: flex;
	width: 100%;
	height: 650px; /*元は450*/
	overflow: hidden;
	z-index: 1;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.loop_slide {
		height :400px;
	}
}

.loop_slide img {
	width: auto;
	height: 100%;
}

.loop_slide img:first-child {
	animation: slide1 60s -30s linear infinite;
}

.loop_slide img:last-child {
	animation: slide2 60s linear infinite;
}


/* アニメーション設定 */
@keyframes slide1 {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}

@keyframes slide2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}

/*スライドに重なってるメッセージ*/
.slide-message img {
	position: absolute;
	width: 60%;
	max-width: 1150px;
	min-width: 500px;
	right: 0;
	bottom: 0;
	z-index: 3;
}

/* スマホ表示の設定 */
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.slide-message img {
		position: absolute;
		width: 90%;
		min-width: 310px;
		right: 0;
		bottom: 0;
		z-index: 10;
	}
}

/* ------- News ----------------------*/
.news-title {
	margin-left: 3vw;
	margin-top: 5vw;
	margin-bottom: 0;
	font-size: clamp(20px, 4vw, 40px);
}
.news-list{
	list-style: none outside;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 5vw;
	padding: 0 3vw 3vw 3vw;
}
.news-list .item a{
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	text-decoration: none;
	color: #1a1a1a;
	border-bottom: 1px solid #5b5b5b;
	padding: 10px;
}
.news-list .item:first-child a{
	border-top: 1px solid #5b5b5b;
}
.news-list .item .date{
	margin: 0;
	min-width: 120px;
	font-size: clamp(13px,1.5vw,20px);
	color: #999;
	padding: 0 20px 0 0;
}
.news-list .item .title{
	margin: 0;
	width: 100%;
	font-size: clamp(13px,1.1vw,20px);
}
.news-list .item a:hover .title{
	color: #a0a0a0;
}

@media screen and (max-width: 767px){
	.news-list .item a{
		flex-wrap: wrap;
	}
	.news-list .item .date{
		min-width: 100px;
	}
	.news-list .item .title{
		margin-top: 5px;
	}
}


/* 装飾 */
*{
	box-sizing: border-box;
}
a{
	text-decoration: none;
}


/*----- All Models --------------------------------*/
.model-title {
	width: 15%;
	min-width: 100px;
	margin: 5vw auto 4vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-title {
		margin: 10vw auto 4vw;
	}
}
.model-title img {
	width: 100%;
}

.model-line {
	width: 85%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;/*子要素を均等に配置して余白を設ける*/
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-line {
		width: 95%;
	}
}

.model-wrap {
	width: 23%;/* 横幅を4等分、余白つけるために少し小さく */
	display: flex;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-wrap {
		width: 32%; /* 横幅を3等分、余白つけるために少し小さく */
	}
}
.model-wrap img {
	width: 100%;
	margin-bottom: 7vw;
}

/*----- モデル募集 --------------------------------*/
.boshu-wrap {
	width: 100%;
	background-color: #1a1a1a;
	margin-top: 15vw;
	padding: 5vw 0;
}
.boshu-title {
	width: 40%;
	margin: 0 auto;
}
.boshu-title img {
	width: 100%;
	padding: 0 0 3vw;
}

.boshu-image {
	width: 95%;
	margin: 0 auto;
}
.boshu-image img {
	width: 100%;
}

.boshu-text {
	width: 60%;
	margin: 0 auto;
}
.boshu-text img {
	width: 100%;
	padding-top: 5vw;
}

/* モデル募集 スクールLPへのbtn */
.boshu-btn {
	width: 30%;
	margin: 5vw auto 0;
}
.boshu-btn img {
	width: 100%;
}

/*----- お問い合わせ --------------------------------*/
.contact-title {
	width: 30%;
	min-width: 160px;
	margin: 10vw auto 4vw;
}
.contact-title img {
	width: 100%;
}

/* お問い合わせbtn */
.contact-btn {
	width: 30%;
	margin: 1vw auto 10vw;
}
.contact-btn img {
	width: 100%;
}

/*=================================================================================
	  Company
	  =================================================================================== */
/*----- 「タイトル」デザイン設定 -----*/
.about_title p {
	text-align: center;
	margin-top: 3vw;
	margin-bottom: 0;
	font-size: 40px;
}

/*画面幅が1000pxまでの場合に適用*/
@media screen and (max-width: 1000px){
	.about_title p {
		text-align: center;
		margin-top: 1.5em;
		margin-bottom: 1.5em;
		/*文字サイズを画面幅に合わせる*/
		font-size: 5.5vw;
	}
}

.company-table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 70%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5vw;
}
.company-table tr {
	border-top: 1px solid #565656;
	border-bottom: 1px solid #565656;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.company-table tr {
		margin-bottom: 5px;
	}
}

.company-table tr th,
.company-table tr td {
	padding: 20px 20px;
	text-align: left;
	vertical-align: top;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.company-table tr th,
	.company-table tr td {
		padding: 10px 10px;
	}
}

.company-table tr th {
	width: 20%;
	font-weight: bold;
	background: #4C4C4C;
	color: #FFF;
}
.company-table tr td {
	width: 80%;
}

@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.company-table tr th,
	.company-table tr td {
		display: block;
		width: 100%;
	}
}

/* 企業名 */
.company-name {
	width: 80%;
	margin: 0 auto;
	font-size: 25px;
}


/*=================================================================================
	  プライバシーポリシー
	  =================================================================================== */
.privacy-wrap {
	width: 80%;
	margin-top: 0;
	margin-bottom: 5vw;
	margin-left: auto;
	margin-right: auto;
}

.privacy-title {
	margin-top: 1em;
	font-size: clamp(15px, 2vw, 30px);
}



/*=================================================================================
  モデル個人ページ
  =================================================================================== */
.profile-wrap {
	width: 90%;
	display: flex;
	margin-top: 3vw;
	margin-bottom: 3vw;
	margin-right: auto;
	margin-left: 10vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.profile-wrap {
		display: block;
		margin-left: auto;
	}
}


/*=================================
ギャラリー スライダーのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.cady_gallery{
	width: 100%;
	margin:0 auto 5px ;
}


/*矢印の設定（画像が4枚以上なら有効にする） --------------------------*/
/*戻る、次へ矢印の位置
.slick-prev, 
.slick-next {
	position: absolute;/*絶対配置にする
	z-index: 3;
	top: 42%;
	cursor: pointer;/*マウスカーソルを指マークに
	outline: none;/*クリックをしたら出てくる枠線を消す
	border-top: 2px solid #ccc;/*矢印の色
	border-right: 2px solid #ccc;/*矢印の色
	height: 25px;
	width: 25px;
	}
	*/

/*
.slick-prev { /*戻る矢印の位置と形状
	left:2.5%;
	transform: rotate(-135deg);
	}
	*/

/*
.slick-next {/*次へ矢印の位置と形状
	right:2.5%;
	transform: rotate(45deg);
	}
	*/

/*選択するサムネイル画像の設定*/
/* Cady -----*/
.cady_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.cady_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.cady_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* Felix -----*/
.felix_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.felix_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.felix_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.felix_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/*  Lisa -----*/
.lisa_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.lisa_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.lisa_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.lisa_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* Miyu -----*/
.miyu_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.miyu_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.miyu_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.miyu_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/*  RINA -----*/
.rina_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.rina_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.rina_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.rina_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}


/*  RUNE -----*/
.rune_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.rune_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.rune_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.rune_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* NOBU -----*/
.nobu_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.nobu_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.nobu_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.nobu_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* 桃堂 ひなの -----*/
.hinano_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.hinano_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.hinano_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.hinano_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}


/* YURI -----*/
.yuri_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.yuri_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.yuri_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.yuri_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* ふぁりょん -----*/
.faryong_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.faryong_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.faryong_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.faryong_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* 瑠羽 -----*/
.lou_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.lou_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.lou_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.lou_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/* YUIKA.N -----*/
.yuika_gallery {
	width: 100%;
	margin: 0 auto 5px;
}

.yuika_choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.yuika_choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.yuika_choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}


/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.photo-wrapper{
	width: 35%;
	margin-top: 2vw;
	margin-bottom: 10vw;
	margin-right: 0;
	margin-left: auto;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.photo-wrapper {
		width: 65%;
		margin: 0 auto 8vw;
	}
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
}

/*----- ここまで -------------------------*/

/* プロフィール内容 */
.profile-content {
	width: 40%;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: 5vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.profile-content {
		width: 70%;
		margin: 0 auto;
	}
}

.profile-text {
	width: 100%;
	margin-bottom: 3vw;
}

/* アルファベットの名前 */
.model-name {
	width: 100%;
	font-family: serif;
	font-size: 3rem;
	line-height: 1;
	margin-top: 1.5vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-name {
		font-size: 1.5rem;
	}
}
/* 日本語の名前 */
.model-onamae {
	width: 100%;
	margin-top: 0.5vw;
	font-family: serif;
	font-size: 1.5rem;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-onamae {
		font-size: 1rem;
	}
}

/* プロフィール文章 */
.model-profile_content {
	width: 100%;
	margin: 3vw auto;
	font-size: 0.7rem;
	font-family: "source-han-sans-japanese", sans-serif;
	font-weight: 300;
	line-height: 1.5;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-profile_content {
		font-size: 0.5rem;
	}
}

.profile_insta-btn {
	width: 10%;
}
.profile_insta-btn img {
	width: 100%;
}

/* ギャラリー -----------------*/
.model-gallery {
	width: 90%;
	margin: 5vw auto;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; /*子要素を均等に配置して余白を設ける*/
}

.model-gallery_line {
	width: 19%; /*横幅を5当分、余白つけるために少し小さく*/
}
.model-gallery_line img {
	width: 100%;
	margin-bottom: 3vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.model-gallery_line {
		width: 24%;
	}
}

/*=================================================================================
	 News
	 =================================================================================== */
.saishin-title { /*「最新情報」文字*/
	width: 80%;
	margin: 1vw auto 1vw 10vw;
	font-size: clamp(15px, 2vw, 30px);
	color: #c70067;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.news-title {
		margin: 6px auto 6px 60px;
	}
}

.news-wrap_wrap {
	width: 80%;
	margin: 3vw auto 15vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.news-wrap_wrap {
		margin: 18px auto 90px;
	}
}

.news-wrap { /*各記事のまとめ*/
	width: 100%;
}

.news-content_title {/*記事のタイトル*/
	width: 100%;
	font-size: clamp(15px, 2vw, 25px);
	border-bottom: solid;
	border-color: #C5145A;
	border-width: 8px; /*8ピクセルの太さ*/
}

.news-content_wrap {
	width: 85%;
	display: flex;
	margin-top: 2vw;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.news-content_wrap {
		display: block;
		margin: 12px auto 0;
	}
}
.news-content_photo {
	width: 50%;
	margin-right: 3vw;
	margin-left: auto;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.news-content_photo {
		width: 75%;
		margin: 0 auto;
	}
}
.news-content_photo img {
	width: 100%;
}

.news-content_text {
	width: 50%;
	margin: 0 auto;
	line-height: 2;
	font-size: 110%;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.news-content_text {
		width: 90%;
		margin: 12px auto;
	}
}

.news-content_text a {
	text-decoration: underline;
	text-decoration-color: #C5145A;
	color: #C5145A;
}

/* newsの特設サイトリンクボタン */
.news-content_btn {
	width: 50%;
	margin: 3vw auto;
}
.news-content_btn-design {
	width: 100%;
	align-items: center;
	background: linear-gradient(#DA4453, #89216B 100%);
	border: 1px solid #000;
	border-radius: 15px;
	box-sizing: border-box;
	width: 100%;
	padding: 5px;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	position: relative;
	line-height: 1.5;
	color: white;
}
.news-content_btn-design a {
	color: #FFF;
}


/*=================================================================================
Footer
=================================================================================== */
#footer .footer_logo img, #footer .footer_logo {
	display: inline-block;
	width: 50%;
	max-width: 400px;
}

#footer ul.footer_navi {
	padding-left: 5vw;
}

#footer .footer_navi li a {
	padding: 0 10px;
	color: #1a1a1a;
}

#footer .footer_logo {
	padding: 10px;
}

#footer .footer_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2vw;
}

#footer .footer_navi {
	display: inline-block;
	list-style: none;
}

#footer .footer_navi li {
	display: inline-block;
	font-family: "Gill Sans","Gill Sans MT","ヒラギノ角ゴシック";
	font-size: 1rem;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	#footer .footer_navi li {
		font-size: 0.6rem;
	}
}

#footer .footer_navi li a:hover {
	text-decoration: none;
}

/*-----コピーライト------------------------------------*/
.copyright {
	background-color: #640125;
	color: #FFF;
	font-family: "ヒラギノ角ゴシック";
	font-size: 10px;
	padding: 5px 0;
	text-align: center;
}
@media screen and (max-width:499px) {/*499px以下で表示される時*/
	.copyright {
		font-size: 7px;
	}
}