@charset "utf-8";
/*
theme Name: GakuHPテーマ作成
Author: VIVIBOND
Description: original theme
version： 1.0.0
*/

/*--Base------------------------------------------------------------*/

html, body {
	width: 100%;
	height: 100%;
}
html {
	height: 100%;
	overflow-y: scroll;
}
/*--Reset-----------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	overflow-y: scroll;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
 input, textarea {
 	margin: 0;
 	padding: 0;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
a:focus {
	outline: none;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
.both {
	clear: both;
}
.inline_block {
	display: inline-block;
 *display: inline;
 *zoom: 1;
}
/*--Text------------------------------------------------------------*/

body {
	font-size: 85%;
	font-weight: normal;
	line-height: 1.6;
	font-family: 'Varela Round', sans-serif;
	font-family: 'Quicksand', sans-serif;
	color: #444;
	background-color: yellow;
}
html>/**/body {
	font-size: 13px;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 110%;
}
/* font
------------------------------------------------- */
.gray30B{
	color: #8a8a8b;
	font-size: 30px;
}

.black18B{
	color: #000000;
	font-size: 18px;
}

/* マージン
------------------------------------------------- */
.marginTop10 {
	margin-top: 10px;
}
.marginTop20 {
	margin-top: 20px;
}
.marginTop30 {
	margin-top: 30px;
}
.marginBot10 {
	margin-bottom: 10px;
}
.marginBot20 {
	margin-bottom: 20px;
}
.marginBot25 {
	margin-bottom: 25px;
}
.marginBot30 {
	margin-bottom: 30px;
}
.marginBot50 {
	margin-bottom: 50px;
}
.marginBot300 {
	margin-bottom: 300px;
}
/*--Link------------------------------------------------------------*/

a img.linkimg {
	background: none!important;
	padding: 0;
	margin: 0;
}
a:hover img.linkimg {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	background: none!important;
	padding: 0;
	margin: 0;
}
/*--HTML5-----------------------------------------------------------*/

article, aside, details, footer, header, main, menu, nav, section, summary {
	display: block;
}
/*--TABLE-----------------------------------------------------------*/


/*--LIST----------------------------------------------------------*/
.movie-wrap {
     position: relative;
     padding-bottom: 46.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/*--ALBUM（Responsive）--*/
.slider_box {
	margin:0;
	clear:both;
}
.slider_box img {
	width: 100%;
	height: auto;
}

/*--ALBUM（Model）--*/
.model_slider_box {
	margin:0;
	clear:both;
}
.model_slider_box img {
	width: 100%;
	height: auto;
}

/* thumb-item */
.thumb-item,.thumb-item2,.thumb-item3,.thumb-item4,.thumb-item5{
	max-width: 800px;
	margin: 0 auto 7px;
	padding: 0 5px;
}
.thumb-item img,.thumb-item2 img,.thumb-item3 img,.thumb-item4 img,.thumb-item5 img,.thumb-item6 img{
	position: relative;
}
.thumb-item p,.thumb-item2 p,.thumb-item3 p,.thumb-item4 p,.thumb-item5 p,.thumb-item6 p{
	width:100%;
	color:#FFF;
	text-align:center;
	position: absolute;
	bottom: 0;
	left: 0;
	padding:1%;
	background-color:#000;
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.thumb-item-nav,.thumb-item-nav2,.thumb-item-nav3,.thumb-item-nav4,.thumb-item-nav5,.thumb-item-nav6{
	max-width: 800px;
	margin: 0 auto;
}
.thumb-item-nav li,.thumb-item-nav2 li,.thumb-item-nav3 li,.thumb-item-nav4 li,.thumb-item-nav5 li,.thumb-item-nav6 li{
	margin: 5px;
}

.thumb-item-nav .slick-next,.thumb-item-nav2 .slick-next,.thumb-item-nav3 .slick-next,.thumb-item-nav4 .slick-next,.thumb-item-nav5 .slick-next{
	right: 15px;
	z-index: 99;
}
.thumb-item-nav .slick-prev,.thumb-item-nav2 .slick-prev,.thumb-item-nav3 .slick-prev,.thumb-item-nav4 .slick-prev,.thumb-item-nav5 .slick-prev{
	left: 6px;
	z-index: 100;
}
/* スライドショーサムネイルなし　*/
.model-slide .slick-next,.model-slide01 .slick-next{
	right: 11px;
	z-index: 1;
}
.model-slide .slick-prev,.model-slide01 .slick-prev{
	left: 1px;
	z-index: 1;
}

/* モデルページ・スライド幅 */
.model-slide,.model-slide01{
  max-width: 800px;
  margin: 0 auto;
}

/* .slick-listにoverflow:visibleで左右の見切れた画像を表示させる */
.model-slide__slider .slick-list,.model-slide01__slider .slick-list{
  overflow: visible;
}

/* 画像幅＝画面幅にする */
.model-slide__slider,.model-slide__slider01 img{
  width: 100%;
}


/* フォーム入力項目 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea  {
	 width: 80%;
	 padding: 8px 15px;
	 margin-right: 10px;
	 margin-top: 10px;
	margin-bottom: 20px;
	 border: 1px solid #ddd;
	 border-radius: 3px;
}
/* 送信ボタン */
input.sub-btn {
	width: 300px;
	height: 60px;
	background: red;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid red;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

/* 送信ボタンホバー */
input.sub-btn:hover{
	background: #FFF;
	color: red;
}
/* 送信ボタン中央寄せ */
.center {
	text-align:center;
}



@media screen and (min-width:768px) {

/* PC用CSS記述 */
/*--layout----------------------------------------------------------*/
#wrapper {
	width: 100%;
	min-width: 1100px;
	font-size: 120%;
	background-size:100%;
}
/*--ヘッダー----------------------------------------------------------*/
#header {
	min-width: 1100px;
	height: 100%;
	margin: 0;
	margin-top: 5px;
	padding: 10px 0;
	text-align: center;
}
#header header {
	min-width: 1100px;
	margin: 0 auto;

}
#header h1{
}

/* メインコンテンツ
--------------------------------- */
#contentsMain {
	min-width: 1100px;
	max-width: 50%;
	margin: 0 auto;
}
#contentsMainIn1 {
	text-align: center;
}

/* youtube */
.box_youtube {
	width: 98%;
	text-align: center;
	padding: 0 0 50px;
	margin-bottom: 0px;
}

video {
  width: 70%;
		margin-bottom: 50px;
}

/* topics */
.box_topics {
	width: 50%;
  display: inline-block;
  text-align: center;
	margin-bottom: 100px;
}
.box_topics h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 2em;
text-align: center;
		font-size: 30px;
	font-weight: bold;
}
.box_topics h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
	text-align: center;
}

.box_topics a,
.box_profile a {
  position: relative;
  display: inline-block;
  transition: .3s;
	font-size: 20px;
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
}
.box_topics a::after,
.box_profile a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
.box_topics a:hover::after {
  width: 100%;
}

.box_topics_in {
	width: 100%;
	text-align: left;
}
ul .list-topics {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;
}
.list-topics-e {
	font-size: 15px;
	padding-bottom: 20px;
　　text-align: center;
}

/* Album */

/* Exhibition 2020-07*/

.box_exhibition {
	width: 100%;
  display: inline-block;
  text-align: center;
	margin-bottom: 50px;
}
.box_exhibition h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 2em;
text-align: center;
		font-size: 30px;
	font-weight: bold;
}

.box_exhibition h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
	text-align: center;
}

.box_exhibition_in{
  width: 95%;
  margin: 0 auto;
  max-width: 800px;
}

.box_exhibition a {
  position: relative;
  display: inline-block;
  transition: .3s;
	font-size: 20px;
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
}
.box_exhibition a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
.box_exhibition a:hover::after {
  width: 100%;
}

ul .list-exhibition {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;
}
.list-exhibition-e {
	font-size: 15px;
	padding-bottom: 20px;

}


/* Profile */
.box_profile{
	width: 50%;
  display: inline-block;
  text-align: center;
	padding: 10px 5px 5px;
	   margin: 10px 0 0;
	background-color: #FFFF00;
}



.box_profile h2 {
	font-size: 23px;
	text-align: left;
	margin-bottom: 10px;
}



.box_profiletext{
	padding-bottom: 70px;
	text-align: left;
		background-color: #FFFF00;
}

dl.list_profile {
    overflow: hidden;
    zoom: 1;
}
dl.list_profile dt {
    width: 80px;
    float: left;
    clear: both;
    font-weight: bold;
	text-align: left;
}
dl.list_profile dd {
    padding: 0 0 20px 80px;
	text-align: left;
}


/* contact */
.box_contact{
	width: 50%;
	display: inline-block;
	text-align: center;
	margin-top: 30px;
	padding: 0 0 100px;
}

.box_contact h2 {
	position: relative;
	display: inline-block;
	margin-bottom: 2.5em;
	padding-top: 50px;
	text-align: center;
	font-size: 30px;
}

.box_contact h2:before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
  -webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
	border-radius: 2px;
	text-align: center;
}


/* Footer
--------------------------------- */
#footer {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 20px 0 10px;
	text-align: center;
}

address{
	font-size: 12px;
}

/* box button */
.box_button{
	width: 90%;
	display: inline-block;
	text-align: center;
	margin-top: 30px;
	padding: 0 0 100px;
}

}/* PC用CSS記述END */
/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width:768px) {

/* スマートフォン用CSS記述 */
/*--layout----------------------------------------------------------*/
#wrapper {
	width: 100%;
	font-size: 120%;
	background-size:100%;
}
/*--ヘッダー----------------------------------------------------------*/
#header {
	height: 100%;
	margin: 0 auto;
}
#header header {
	margin: 0 auto;
}
#header h1{
	text-align: center;
}

#header img{
	width: 50%;
	height: 50%;
    margin: 0,0,0, -200px;
}

/* メインコンテンツ
--------------------------------- */
#contentsMain {
	max-width: 100%;
	margin: 0, auto;
}
#contentsMainIn1 {
	width: 100%;
	text-align: center;
}


/* youtube */
.box_youtube {
	width: 100%;
	text-align: center;
}
video {
	width: 100%;
}

/* topics */
.box_topics {
	width: 100%;
  display: inline-block;
  text-align: center;
 margin: 60px 0 0;
}

.box_topics h2 {
	position: relative;
	display: inline-block;
	margin-bottom: 2em;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
}
.box_topics h2:before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
  -webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
	border-radius: 2px;
	text-align: center;
}

.box_topics a {
  position: relative;
  display: inline-block;
  transition: .3s;
	font-size: 20px;
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
}
.box_topics a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
.box_topics a:hover::after {
  width: 100%;
}

.box_topics_in {
	width: 100%;
}
ul .list-topics {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;

}
.list-topics-e {
	font-size: 15px;
	padding-bottom: 10px;

}


/* Exhibition 2020-07Smartphone*/

.box_exhibition {
	width: 50%;
  display: inline-block;
  text-align: center;
	margin-bottom: 20px;
}

.box_exhibition h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 2em;
text-align: center;
		font-size: 30px;
	font-weight: bold;
}

.box_exhibition h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
	text-align: center;
}

.box_exhibition_in{
  width: 100%;
  margin: 0 auto;
  max-width: 400px;
}

.box_exhibition a {
  position: relative;
  display: inline-block;
  transition: .3s;
	font-size: 20px;
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
}
.box_exhibition a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
.box_exhibition a:hover::after {
  width: 100%;
}

ul .list-exhibition {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;
}
.list-exhibition-e {
	font-size: 15px;
	padding-bottom: 10px;

}


/* Album */
.box_album{
	width: 100%;
	height: 100%;
    padding: 50px 0 50px;
}

/* Model Album */
.model_box_album{
	width: 100%;
    padding: 2px 0 2px;
}



/* Profile */
.box_profile{
	height: 100%;
    padding: 10px 0 0;
	   margin: 0 0 0;
	background-color: #FFFF00;
}
.box_profile img{
	width: 100%;
	margin-bottom: 20px;
}

.box_profile h2 {
	font-size: 23px;
	text-align: left;
	margin-bottom: 10px;
	padding-left: 20px;
}


.box_profiletext{
	padding:0 20px 30px;
	text-align: left;
		background-color: #FFFF00;
}

dl.list_profile {
    overflow: hidden;
    zoom: 1;
}
dl.list_profile dt {
    width: 60px;
    float: left;
    clear: both;
    font-weight: bold;
	text-align: left;
}
dl.list_profile dd {
    padding: 0 0 20px 60px;
	text-align: left;
}


/* contact */
.box_contact{
	width: 100%;
	display: inline-block;
	text-align: center;
	padding: 30px 0 100px;
}
.box_contact h2 {
	position: relative;
	display: inline-block;
	margin-bottom: 2em;
	padding-top: 20px;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
}

.box_contact h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
	text-align: center;
}

/* Footer
--------------------------------- */
#footer {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	background-color: #ffff00;
}
address{
	font-size: 12px;
}

}/* スマートフォン用CSS記述END */

.iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 2px solid #ccc;
}

.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.grid-gallery {
	margin: 10px auto;
	text-align: center;
}

.grid-gallery-photos {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	
}

.grid-gallery-caption {
	width: calc(50% - 5px);
}

.grid-gallery-caption:nth-child(2n) {
	margin-left: 10px;
}

.grid-gallery-caption .crop {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
	margin-bottom: 10px;
}

.grid-gallery-caption .crop img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}