@charset "UTF-8";
/* CSS Document */

/*---------------------------------
  
  0.ボタン

  1.header

  2.index.html（HOME）
    2.1メインビジュアル-スライド
    2.2イベント・FaceBook
    2.3陶芸学科
    2.4ここは、優れた陶芸家を育み笠間焼の産地としての価値を高める場。
    2.5研究科
    2.6お知らせ

  3.common
    3.1ページタイトル
    3.2パンくずリスト
    3.3見出しデザイン
    3.4セクション中身（ul/ol/dl/table）

  4.レイアウト
    4.1内容大枠
    4.2メニューリスト
    4.3サイドメニュー付 子ページ

  5.About（大学校案内）
    5.1ヘッダー画像
    5.2コンセプト・ミッション
    5.3陶芸学科/研究科
    5.4施設紹介
    5.5講師紹介
    5.6卒業生の進路
    5.7沿革

  6.guide（入学案内）
    6.1ヘッダー画像
    6.2内容
    6.3入学に関するQ&A

  7.exhibition（展覧会・受賞者）
    7.1ヘッダー画像
    7.2内容
    7.3受賞者

  8.training（講習会・研修会）
    8.1ヘッダー画像
    8.2内容

  9.exam（依頼試験・設備利用）
    9.1ヘッダー画像
    9.2技術相談・指導
    9.3依頼試験・分析
    9.4設備機器の利用

  10.opencampus（オープンキャンパス）
    10.1ヘッダー画像
    10.2内容

  11.access（アクセス）
    11.1ヘッダー画像
    11.2内容

  12.contact（お問い合わせ）
    12.1ヘッダー画像
    12.2内容

  13.policy（サイトポリシー）
    13.1ヘッダー画像
    13.2内容

  14.link（リンク）
    14.1ヘッダー画像
    14.2内容

  15.info（お知らせ）
    15.1ヘッダー画像
    15.2内容

  16.topics（トピックス）
    16.1ヘッダー画像
    16.2内容

  17.pagetop

  18.footer

---------------------------------*/
.sp_none {
    display: none;
}


/*---------------------------------

  0.ボタン

---------------------------------*/
.button {
	text-align: center;
}

.button a {
	display: block;
	padding: .8em 0;
	font-size: 0.875em;
	color: #fff;
	background: #F03200;
}

.button a p {
	display: inline-block;
}

.button a .arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 45px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}

.button a .arrow::before{
	content: '';
	width: 24px;
	height: 5px;
	background: url("../images/arrow01.svg") no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    
    vertical-align: middle;
	transition: all .3s;
}

.button a:hover  {
	opacity: 1;
}

.button a:hover .arrow::before {
	left: 8px;
}





/*---------------------------------

  1.header

---------------------------------*/
header {
	width: 100%;
	height: 60px;
	position: fixed;
	z-index: 2;
	background: #fff;
}

header .wrap {
	width: 95%;
	margin: 0 auto;
}


/*  
  TOGEIDAI
---------------------------------*/
header .wrap #logo {
	width: 210px;
	margin: 1.3em 0;
}

header .wrap #logo img{
	width: 100%;
}


/*  
  学校名・サブメニュー
---------------------------------*/
header .wrap #gnav_sab {
	display: none;
}


/*  
  gnav_main
---------------------------------*/
header #gnav_main #navTgl {
  	display: none;
}

header #gnav_main .open {
	cursor: pointer;
  	position: absolute;
	top: 5px;
  	right: 0;
	z-index: 9;
	
  	display:block;
    width:50px;
    height:50px;
	
	-moz-transition:all 0.6s;
    -webkit-transition:all 0.6s;
    transition:all 0.6s;
}

header #gnav_main .open span {
	content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 30px;
    height: 2.2px;
	-moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
	background-color: #F03200;
}

header #gnav_main .open span:nth-of-type(1) {
	top: 15px;
}

header #gnav_main .open span:nth-of-type(2) {
	width: 23px;
	top: 25px;
}

header #gnav_main .open span:nth-of-type(3) {
	width: 15px;
	top: 35px;
}

header #gnav_main #navTgl:checked + .open span:nth-of-type(1) {
	display: none;
}

header #gnav_main #navTgl:checked + .open span:nth-of-type(2) {
	width: 30px;
	-moz-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    top:25px;
    right:0;
}

header #gnav_main #navTgl:checked + .open span:nth-of-type(3) {
	width: 30px;
	-moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    top:25px;
    right:0;
}

header #gnav_main label.close {
  	cursor: pointer;
  	position: fixed;
  	top: 60px;
  	right: 0;
}

header #gnav_main .close {
  	pointer-events: none;
  	z-index: 6;
  	width: 100%;
  	transition: background-color .3s;
}

 header #navTgl:checked ~ .close {
	height: 100vh;
	position:fixed;
	-webkit-transform: translateX(0px);
  	transform: translateX(0px);
  	pointer-events: auto;
  	background-color: rgba(0,0,0,.7);
}
 

/* :::::: drawer menu :::::: */
header #gnav_main .gnav {
  	z-index: 8;
  	position: fixed;
  	top: 60px;
  	right: 0;
  	width: 100%;
  	height: 100%;
	background: #fff;
	display: none;
  	/*-webkit-transform: translateX(100%);
  	transform: translateX(100%);*/
  	-webkit-transition: -webkit-transform .6s;
  	transition: transform .6s;
}

header #gnav_main #navTgl:checked ~ .gnav {
	display: block;
  	/*-webkit-transform: translateX(0);
  	transform: translateX(0);*/
}

header #gnav_main .gnav ul {
	margin: 20px 0 0 30px;
  	padding: 0;
  	list-style-type:none;
	background: #fff;
}

header #gnav_main .gnav ul li a{
	display: block;
	width: 100%;
	padding: 0.5em 1em;
	color: #F03200;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

header #gnav_main .gnav ul li a {
	line-height: 40px;
	margin-right: 10px;
}

header #gnav_main .gnav  ul li a span {
	display: block;
	position: relative;
	z-index: 4;
}

header #gnav_main .gnav ul li a:hover {
	color: #fff;
	opacity: 1;
}

header #gnav_main .gnav ul li a::before {
	content: '';
	width: 100%;
	height: 2em;
	background: #F03200;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	display: block;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .6s;
	z-index: 2;
}

header #gnav_main .gnav ul li a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

/* 現在いるページ */
header #gnav_main .gnav ul li.active a {
	color: #fff;
}

header #gnav_main .gnav ul li.active a::before {
	content: '';
	width: 100%;
	height: 2em;
	background: #F03200;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	display: block;
	transform: none;
	z-index: 2;
}


@media screen and (max-width: 480px) {
    header #gnav_main .gnav ul li a {
        line-height: 25px;
    }
}


/*==================================================================
	2.index.html（HOME）
==================================================================*/

/*---------------------------------

	2.1メインビジュアル-スライド

---------------------------------*/
.home #slider {
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 0;
}

.home #slider .wrap {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.home #slider .wrap::before {
	content: '';
	width: 410px;
	height: 90px;
	background: url("../images/copy_01.png") no-repeat;
	background-size: contain;
	position: absolute;
	top: 50px;
	right: 0;
	z-index: 1;
}

.home #slider li {
	width: 100%;
	height: 350px;
}

.home #slider li.top01 {
	background: url("../images/top_01.jpg") no-repeat center;
	background-size: cover;
}

.home #slider li.top02 {
	background: url("../images/top_02.jpg") no-repeat center;
	background-size: cover;
}

.home #slider li.top03 {
	background: url("../images/top_03.jpg") no-repeat center;
	background-size: cover;
}

.home #slider li.top04 {
	background: url("../images/top_04.jpg") no-repeat center;
	background-size: cover;
}

@media screen and (max-width:580px) {
 	.home #slider .wrap::before {
		content: '';
		width: 280px;
		height: 61px;
		background: url("../images/copy_01.png") no-repeat;
		background-size: contain;
		position: absolute;
		top: 30px;
		right: 0;
		margin: auto;
		z-index: 1;
	}
    
	.home #slider li {
		width: 100%;
		height: 250px;
	}
}


/*---------------------------------
	#content
---------------------------------*/
.home #content .wrap {
	width: 90%;
	margin: 0 auto;
}



/*---------------------------------

	2.2イベント・FaceBook

---------------------------------*/
.home #content .wrap.col1 {
	margin-top: -1em;
	margin-bottom: 2em;
}


/*  
  イベント一覧
---------------------------------*/
.home #content .wrap .event {
	width: 100%;
	
}

.home #content .wrap .event ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items:stretch;
	list-style: none;
}

.home #content .wrap .event ul li {
	display: block;
	width: 47%;
	height: 310px;
	align-self:stretch;
}

.home #content .wrap .event ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: relative;
}

.home #content .wrap .event ul li a figure {
	width: 100%;
	max-height: 220px;
	overflow: hidden;
	border: 2px solid #fff;
	background: #000;
}

.home #content .wrap .event ul li a figure img {
	width: 100%;
	vertical-align: bottom;
	transition-duration: 0.3s;
}

.home #content .wrap .event ul li a:hover figure img {
	transform: scale(1.1);	
	opacity: 0.6;
}

.home #content .wrap .event ul li a .txtBox {
	width: 100%;
	padding: .8em 1em;
}

.home #content .wrap .event ul li a .txtBox p {
	font-weight: normal;
	color: #000;
}

.home #content .wrap .event ul li a .day {
	min-height: 38px;
	padding: .5em 1em;
	font-size: 0.875em;
	border-top: 1px solid;
	color: #947852;
	margin: auto;
}

.home #content .wrap .event ul li a:hover {
	opacity: 1;
}

.home #content .wrap .event .button {
	width: 157px;
	margin: 2em auto;
}


/*  
  facebook
---------------------------------*/
.home #content .wrap .facebook {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.home #content .wrap .facebook .ac {
	width: 125px;
	margin: 1.875em 0 0.2em;
	margin-left: auto;
}

.home #content .wrap .facebook .ac img {
	width: 100%;
}

.home #content .wrap .facebook .box {
	width: 100%;
	height: 330px;
	padding: 5px;
	border: 1px solid #ccc;
}

.facebook-wrapper {
    max-width: 500px;
	height: 320px;
    margin: 0 auto;
}

.facebook-wrapper > .fb-page {
    width: 100%;
	height: 100%;
}

.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
	height: 100% !important;
}

@media screen and (max-width:580px) {
	.home #content .wrap .facebook {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
    
	.facebook-wrapper {
		max-width: 330px;
		height: 320px;
		margin: 0 auto;
	}
}



/*---------------------------------

	2.3陶芸学科

---------------------------------*/
.home #content .col2 {
	width: 100%;
	min-height: 860px;
	background: url("../images/bg.jpg") no-repeat;
	background-size: cover;
	overflow: hidden;
}

.home #content .col2 .wrap {
	padding: 50px 0;
	
}


/*  
  left
---------------------------------*/
.home #content .col2 .wrap .left {
	width: 100%;
	margin-bottom: 4em;
}

/* 陶芸学科 */
.home #content .col2 .wrap .left h2 {
	width: 12.813em;
	margin-bottom: 2em;
}

.home #content .col2 .wrap .left h2 img{
	width: 100%;
}

/* キャッチコピー */
.home #content .col2 .wrap .left h3 {
	width: 100%;
	max-width: 20.813em;
	margin-bottom: 1.5em;
}

.home #content .col2 .wrap .left h3 img{
	width: 100%;
}

/* テキスト */
.home #content .col2 .wrap .left .txtBox {
	width: 100%;
	margin-bottom: 50px;
	line-height: 1.750em;
	color: #fff;
}

/* スライド */
.home #content .col2 .wrap .left .tougeiSliderWrap {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.home #content .col2 .wrap .left .tougeiSliderWrap ul {
	width: 45%;
	list-style: none;
}

.home #content .col2 .wrap .left .tougeiSliderWrap ul li img{
	width: 100%;
}


/*  
  right
---------------------------------*/
.home #content .col2 .wrap .right {
	width: 100%;
	position: relative;
}

/* 写真 */
.home #content .col2 .wrap .left .tougeiSliderWrap::after {
	content: '';
	width: 56%;
	height: 55%;
	background: url("../images/person.jpg") no-repeat center;
	background-size: cover;
	position: absolute;
	top: 0;
	right: -6%;
}

/* 陶芸学科について */
.home #content .col2 .wrap .contentLinkBox1 {
	width: 100%;
	margin-top: 3em;
	text-align: left;
}

.home #content .col2 .wrap .contentLinkBox1 a {
	padding: 10px;
	background: #EFEBE5;
	position: relative;
}

.home #content .col2 .wrap .contentLinkBox1 a figure {
	width: 100%;
	overflow: hidden;
	background: #000;
}

.home #content .col2 .wrap .contentLinkBox1 a figure img {
	width: 100%;
	vertical-align: bottom;
	transition-duration: 0.3s;
}

.home #content .col2 .wrap .contentLinkBox1 a:hover figure img {
	transform: scale(1.1);	
	opacity: 0.6;
}

.home #content .col2 .wrap .contentLinkBox1 a p {
	height: 1em;
	font-size: 2em;
	color: #fff;
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	margin: auto;
	text-shadow: 
        #555 1px 1px 0, #555 -1px -1px 0,
        #555 -1px 1px 0, #555 1px -1px 0,
        #555 0px 1px 0, #555  0-1px 0,
        #555 -1px 0 0, #555 1px 0 0;
}

.home #content .col2 .wrap .contentLinkBox1 a .arrow::before {
	content: '';
	width: 40px;
	height: 13px;
	background: url("../images/arrow01.svg") no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    margin: auto;
	vertical-align: middle;
	transition: all .3s;
}

.home #content .col2 .wrap .contentLinkBox1 a:hover .arrow::before {
	left: -10px;
}

/* オープンキャンパス/日程　学校見学/随時受付 */
.home #content .col2 .wrap .contentLinkBox2 {
	width: 100%;
	margin: 2.5em 0 0;
	display: flex;
	justify-content: space-between;
}

.home #content .col2 .wrap .contentLinkBox2 .box {
	width: 47%;
}

.home #content .col2 .wrap .contentLinkBox2 .box a {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background: transparent;
}

.home #content .col2 .wrap .contentLinkBox2 .box a figure {
	margin-bottom: .7em;
	overflow: hidden;
	border: 5px solid #EFEBE5;
	background: #000;
}

.home #content .col2 .wrap .contentLinkBox2 .box a figure img{
	width: 100%;
	vertical-align: bottom;
	transition-duration: 0.3s;
}

.home #content .col2 .wrap .contentLinkBox2 .box a:hover figure img {
	transform: scale(1.1);	
	opacity: 0.6;
}

@media screen and (max-width:480px) {
	/* スライド */
	.home #content .col2 .wrap .left .tougeiSliderWrap ul {
		width: 80%;
		margin: 0 auto;
	}
    
	/* 写真 */
	.home #content .col2 .wrap .left .tougeiSliderWrap::after {
		content: none;
	}
    
	.home #content .col2 .wrap .contentLinkBox1 a {
		padding: 5px;
		background: #EFEBE5;
		position: relative;
	}
}



/*---------------------------------

	2.4ここは、優れた陶芸家を育み笠間焼の産地としての価値を高める場。

---------------------------------*/
.home #content .col3 {
	text-align: center;
}

.home #content .col3 .bg {
	width: 100%;
	height: 200px;
	background: url("../images/bg2.jpg") no-repeat;
	background-size: cover;
}

.home #content .col3 h2 {
	width: 70%;
	margin: 4.5em auto 0;
}

.home #content .col3 h2 img {
	width: 100%;
}

.home #content .col3 span {
	width: 130px;
	margin: 1.875em auto;
	display: block;
}

.home #content .col3 span img {
	width: 100%;
}

@media screen and (max-width:480px) {
	.home #content .col3 .bg {
		width: 100%;
		height: 100px;
	}
    
	.home #content .col3 h2 {
		width: 90%;
		margin: 2em auto 0;
	}
}



/*---------------------------------

	2.5研究科

---------------------------------*/
.home #content .col4 {
	width: 100%;
	height: 450px;
	background: url("../images/bg3.jpg") no-repeat;
	background-size: cover;
}

.home #content .col4 .wrap {
	height: 450px;
	background: url("../images/con4_bg.png") no-repeat right;
	background-size: contain;
}


/*  
  left
---------------------------------*/
.home #content .col4 .wrap .left {
	width: 100%;
	padding: 50px 0 0;
}

/* 陶芸学科 */
.home #content .col4 .wrap .left h2 {
	width: 12.813em;
	margin-bottom: 4.6em;
}

.home #content .col4 .wrap .left h2 img{
	width: 100%;
}

/* キャッチコピー */
.home #content .col4 .wrap .left h3 {
	width: 100%;
	max-width: 20.813em;
	margin-bottom: 2.5em;
}

.home #content .col4 .wrap .left h3 img{
	width: 100%;
}

/* テキスト */
.home #content .col4 .wrap .left .txtBox {
	width: 100%;
	margin-bottom: 1.5em;
	line-height: 1.750em;
	color: #fff;
	text-shadow: 
        #171612 1px 1px 0, #171612 -1px -1px 0,
        #171612 -1px 1px 0, #171612 1px -1px 0,
        #171612 0px 1px 0, #171612  0-1px 0,
        #171612 -1px 0 0, #171612 1px 0 0;
}

/* ボタン */
.home #content .col4 .wrap .left .button {
	width: 252px;
	position: relative;
	z-index: 1;
}

.home #content .col4 .wrap .left .button a {
	width: 100%;
	padding: 2.813em 0;
}

.home #content .col4 .wrap .left .button a p {
	height: 1.286em;
	font-size: 1.286em;
}


/*  
  right
---------------------------------*/
.home #content .col4 .wrap .right {
	display: none;
}

@media screen and (max-width:600px) {
	.home #content .col4 .wrap {
		height: 450px;
		background: none;
	}
}



/*---------------------------------

	2.6お知らせ

---------------------------------*/
.home #content .col5.info {
	width: 100%;
}

.home #content .col5 .wrap {
	padding: 9.063em 0 4.375em;
}

.home #content .col5 .title {
	margin-bottom: 25px;
}

.home #content .col5 .title h2 {
	margin-right: 2em;
	font-size: 1.188em;
	font-weight: normal;
	display: inline-block;
}

.home #content .col5 .title .button {
	width: 140px;
	display: inline-block;
}

.home #content .col5 .infoBox {
	width: 100%;
}

.home #content .col5 .infoBox dl {
    padding: 0.813em 0;
	border-bottom:1px solid #E6E6E6;
    display: flex;
	color: #141414;
    transition: all .3s;
}

.home #content .col5 .infoBox a {
	display: block;
}

.home #content .col5 .infoBox dl dt {
	margin-right: 1.5em;
	font-size: 0.750em;
	color: #947852;
}

.home #content .col5 .infoBox dl dd {
	font-size: 0.938em;
	
}

.home #content .col5 .infoBox a:hover dl {
	color: #F03200;
}


/*---------------------------------

	2.7動画

---------------------------------*/
.home #content .col6.movie {
	width: 100%;
}
.home #content .col6.movie a {
	display: block;
	width: 100%;
	height: 300px;
	position: relative;
	overflow: hidden;
}
.home #content .col6.movie a::before,
.home #content .col6.movie a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
.home #content .col6.movie a::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 50px;
	border-color: transparent transparent transparent #F03201;
	z-index: 2;
}
.home #content .col6.movie a::after {
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
	border-radius: 50%;
	background: #fff;
	width: 150px;
	height: 150px;
}
.home #content .col6.movie a:hover {
	opacity: 1;
}
.home #content .col6.movie a .overlay,
.home #content .col6.movie a #yt_player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.home #content .col6.movie a .overlay {
	background: rgba(161,33,0,0.50);
    z-index: -1;
}
.home #content .col6.movie a #yt_player{
    z-index: -2;
}




/*==================================================================
	3.common
==================================================================*/

/*---------------------------------

	3.1ページタイトル

---------------------------------*/
.page #head-ttl {
	width: 100%;
	height: 25.000em;
	margin: 0 auto;
	background: #ccc;
	position: relative;
}

.page #head-ttl .wrap {
	width: 100%;
	height: 2.813em;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

.page #head-ttl h2{
	color: #fff;
	display: inline-block;
	font-size: 2.813em;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: normal;
	text-shadow:0px 0px 20px rgba(0,0,0,0.6);
	line-height: 1;
	letter-spacing: 8px;
	padding: 0 50px 0 55px;
	position: relative;
}

.page #head-ttl h2:before,
.page #head-ttl h2:after{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #fff;
}

.page #head-ttl h2:before {left:0;}
.page #head-ttl h2:after {right: 0;}

@media screen and (max-width: 480px) {
    .page #head-ttl {
        height: 20em;
    }
    
    .page #head-ttl h2{
        font-size: 1.5em;
        letter-spacing: 5px;
    }
}


/*---------------------------------

	3.2パンくずリスト

---------------------------------*/
.breadcrumb {
	width: 100%;
	height: 6.25em;
	position: relative;
}

.breadcrumb::before {
	content: '';
	width: 12.5em;
	height: 3px;
	background: #f03200;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.breadcrumb ul {
	width: 100%;
	padding: 1.875em 0;
	margin-left:0;
	text-align: center;
}

.breadcrumb ul li{
	font-size: 0.875em;
	display:inline;/*横に並ぶように*/
	list-style: none;
}

.breadcrumb ul li:after{
	content: '-';
	padding: 0 3px;
	color: #141414;
}

.breadcrumb ul li:last-child:after{
	content: '';
}

.breadcrumb ul li a {
	text-decoration: none;
	color: #141414;/*色*/
}

.breadcrumb ul li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 480px) {
    .breadcrumb {
        height: 70px;
    }
    .breadcrumb ul {
        padding: 1.3em 0;
    }
}


/*---------------------------------

	3.3見出しデザイン

---------------------------------*/
/*  
  h3（ページの見出し）
---------------------------------*/
.page #Title {
	width: 100%;
	height: 100px;
	text-align: center;
}

.page #Title h3 {
	font-size: 2.5em;
	font-weight: normal;
	letter-spacing: 5px;
	line-height: 1;
}

@media screen and (max-width: 480px) {
    .page #Title {
        height: auto;
        margin-bottom: 1.2em;
    }
    
    .page #Title h3{
        letter-spacing: 2px;
        font-size: 1.6em;
        line-height: 1.3;
    }
}


/*  
  h4（セクションごとの見出し）
---------------------------------*/
.page section h4 {
	width: 100%;
	padding: 1.167em 0;
	margin-bottom: 1.667em;
	font-size: 1.875em;
	font-weight: normal;
	letter-spacing: 5px;
	line-height: 1;
	text-align: center;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

@media screen and (max-width: 480px) {    
    .page section h4 {
        letter-spacing: 2px;
        font-size: 1.4em;
        line-height: 1.3;
        padding: .85em 0;
        margin-bottom: 1.0em;
    }
}


/*  
  h5（小見出し1）
---------------------------------*/
.page section h5 {
	width: 100%;
	padding: 0;
	margin-bottom: 2.5em;
	color: #333;
	font-size: 1.438em;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.3;
	text-align: left;
	position: relative;
}

.page section h5::after {
    content: '';
    width: 50px;
    height: 5px;
    background: #E0D6C8;
    display: block;
    margin-top: 25px;
}


/*  
  h6（小見出し2）
---------------------------------*/
.page section h6 {
	width: 100%;
	padding-bottom: .5em;
	margin-bottom: .8em;
	color: #333;
	font-size: 1.125em;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.5;
	text-align: left;
	border-bottom: 1px solid #dfd6cb;
}



/*---------------------------------

	3.4セクション中身（ul/ol/dl/table/img）

---------------------------------*/
.page section {
	margin-bottom: 6.250em;
}

.page section .section {
	margin-bottom: 3.125em;
}

@media screen and (max-width: 480px) { 
    .page section {
        margin-bottom: 3em;
    }
    
    .page section .section {
        margin-bottom: 2.5em;
    }
}

/*  
  テキスト
---------------------------------*/
.page section .textArea {
	text-align: justify;
	line-height: 1.7;
}

.page section .textArea p {
	margin-bottom: 1em;
}

.page section .textArea p:last-child {
	margin-bottom: 0;
}

.page section .textArea p a{
	color: #FF6F4A;
	text-decoration: underline;
}

.page section .textArea p a:hover {
	color: #F03200;
	opacity: 1;
	text-decoration: none;
}

.page section a[target="_blank"] {
	color: #F03200;
	position: relative;
}
    
.page section a[target="_blank"]::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: url("../images/icon_blank01.svg") no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: .5em;
}



/*  
  アイコン類（NEW 終了しました）
---------------------------------*/
span.new {
	padding: 4px 8px;
	margin-left: 1em;
	line-height: 1;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	background: #F03200;
	color: #fff;
}

span.end {
	padding: 4px 8px;
	margin-left: 1em;
	line-height: 1;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	background: #737373;
	color: #fff;
}


/*  
  ul li
---------------------------------*/
.page section ul {
	list-style: none;
	margin: .8em 0;
}

.page section ul li {
	padding-left: 1.2em;
	margin-bottom: .8em;
	position: relative;
}

.page section ul li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #947852;
	position: absolute;
	top: 10px;
	left: 5px;
}


/*  
  ol li
---------------------------------*/
.page section ol {
	margin-top: 1em;
	margin-left: 1.5em;
}

.page section ol li{
	margin-bottom: .8em;
}


/*  
  dl dt dd
---------------------------------*/


/*  
  table
---------------------------------*/
.page section table {
	width: 100%;
	border: 0;
}

.page section table th,
.page section table td {
	border: 1px solid #E0D6C8;
	padding: .8em 1em;
	vertical-align: middle;
}

.page section table th {
	width: 25%;
	text-align: left;
	color: #666;
	background: #f4f4f4;
}

.page section table td {
	width: 75%;
	text-align: justify;
}


/*  
  figure > img
---------------------------------*/
.page section figure {
	text-align: center;
}

.page section figure img {
	width: 100%;
	vertical-align: bottom;
}

.page section figure figcaption {
	margin-top: .8em;
}



/*==================================================================
	4.レイアウト
==================================================================*/
/*---------------------------------

	4.1内容大枠

---------------------------------*/
.page main#content {
	width: 95%;
	height: auto;
	margin: 0 auto;
	margin-top: -6.250em;
	background: #fff;
	border-radius: 2px;
	position: relative;
}

.page main#content #wrapper {
	width: 85%;
	max-width: 1150px;
	height: auto;
	margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .page main#content #wrapper {
        width: 95%;
    }
}


/*---------------------------------

	4.2メニューリスト　（大学校案内/依頼試験・設備利用）

---------------------------------*/
.page #container #menu_wrapper .menu_list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.page #container #menu_wrapper .menu_list a {
	display: block;
	color:#141414;
}


/*  
  画像つきメニュー（上段3つ）
---------------------------------*/
.page #container #menu_wrapper .menu_list_img {
	margin-bottom: 6.250em;
}
.page #container #menu_wrapper .menu_list_img .box {
	width: 33%;
	text-align: center;
}

.page #container #menu_wrapper .menu_list_img .box figure {
	width: 100%;
	overflow: hidden;
	background: #141414;
}

.page #container #menu_wrapper .menu_list_img .box figure img {
	width: 100%;
	vertical-align: bottom;
	transition-duration: 0.3s;
}

.page #container #menu_wrapper .menu_list_img .box p.arrow {
	width: 100%;
	padding: 20px;
    font-size: .8em;
	display: block;
	position: relative;
    vertical-align: middle;
}

.page #container #menu_wrapper .menu_list_img .box p.arrow::before{
	content: '';
	width: 24px;
	height: 5px;
	background: url("../images/arrow02.svg") no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    
    vertical-align: middle;
	transition: all .3s;
}

.page #container #menu_wrapper .menu_list_img .box p.arrow::after {
	content: '';
	width: 60px;
	height: 1px;
	background: #141414;
	position: absolute;
    bottom: 0;
    left: 0;
	right: 0;
    margin: auto;
}

.page #container #menu_wrapper .menu_list_img .box a:hover  {
	opacity: 1;
	color: #f03200;
}

.page #container #menu_wrapper .menu_list_img .box a:hover figure img {
	transform: scale(1.1);	
	opacity: 0.6;
}

.page #container #menu_wrapper .menu_list_img .box a:hover .arrow::before {
	left: 8px;
}

.page #container #menu_wrapper .menu_list_img .box a:hover .arrow::after {
	background: #f03200;
}


@media screen and (max-width: 480px) {
    .page #container #menu_wrapper .menu_list_img {
        margin-bottom: 1em;
    
    }
    .page #container #menu_wrapper .menu_list_img .box {
        width: 50%;
        margin-bottom: 2em;
    }
    
    .page #container #menu_wrapper .menu_list_img .box p.arrow {
        padding: 10px 0;
    }
    .page #container #menu_wrapper .menu_list_img .box p.arrow::before{
	    content: none;
    }
}



/*  
  文字メニュー（下段2列ずつ）
---------------------------------*/
.page #container #menu_wrapper .menu_list_text_wrap {
	margin-bottom: 9.375em;
}

/*::: タイトル（あれば） :::*/
.page #container #menu_wrapper .menu_list_text_wrap p.ttl {
	display: inline-block;
	padding-right: 45px;
	font-size: 1.3em;
	margin-bottom: 1em;
	position: relative;
}

.page #container #menu_wrapper .menu_list_text_wrap p.ttl::after {
	content: '';
	width: 30px;
	height: 1px;
	background: #141414;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/*::: リンクボックス :::*/
.page #container #menu_wrapper .menu_list_text {
	list-style: none;
}

.page #container #menu_wrapper .menu_list_text li {
	width: 48%;
	margin-bottom: 3.125em;
	text-align: center;
}

.page #container #menu_wrapper .menu_list_text a {
	background: #f3f3f3;
	border-bottom: 1px solid;
}

.page #container #menu_wrapper .menu_list_text p.arrow {
	width: 100%;
	padding: 15px 0;
	display: block;
	position: relative;
}

.page #container #menu_wrapper .menu_list_text .box p.arrow::before{
	content: '';
	width: 24px;
	height: 5px;
	background: url("../images/arrow02.svg") no-repeat;
	background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
    
    vertical-align: middle;
	transition: all .3s;
}

.page #container #menu_wrapper .menu_list_text .box a:hover  {
	opacity: 1;
	color: #f03200;
}

.page #container #menu_wrapper .menu_list_text .box a:hover .arrow::before {
	left: 28px;
}


@media screen and (max-width: 480px) {
    .page #container #menu_wrapper .menu_list_text_wrap {
        margin-bottom: 3em;
    
    }
    .page #container #menu_wrapper .menu_list_text li {
        width: 100%;
        margin-bottom: .8em;
    }
}



/*  
  ページ内リンクメニュー（下段4列ずつ）
---------------------------------*/
.page #container .pageanchor_list_wrap {
	margin-bottom: 2.5em;
}

.page #container .pageanchor_list_wrap .anchor_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.page #container .pageanchor_list_wrap .anchor_list li {
	width: 32%;
	margin-bottom: 1.125em;
	text-align: center;
}

.page #container .pageanchor_list_wrap .anchor_list a {
	display: flex;
    align-items: center;
    height: 100%;
	color: #141414;
	background: #f3f3f3;
	border: 1px solid #ccc;
}

.page #container .pageanchor_list_wrap .anchor_list p.arrow {
	width: 100%;
    line-height: 1.5;
	padding: 10px 5px 10px 25px;
	display: block;
	position: relative;
}

.page #container .pageanchor_list_wrap .anchor_list .box p.arrow::before{
	content: '';
	width: 12px;
	height: 8px;
	background: url("../images/arrow04.svg") no-repeat;
	background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    
    vertical-align: middle;
	transition: all .3s;
}

.page #container .pageanchor_list_wrap .anchor_list .box a:hover  {
	opacity: 1;
	color: #f03200;
	border-bottom: 1px solid #f03200;
}

.page #container .pageanchor_list_wrap .anchor_list .box a:hover .arrow::before {
	top: 10px;
}


@media screen and (max-width: 480px) {
    .page #container .pageanchor_list_wrap .anchor_list li {
        width: 48%;
        margin-bottom: 1.125em;
        text-align: center;
    }
    
    .page #container .pageanchor_list_wrap .anchor_list .box p.arrow {
        font-size: .8em;
    }
}



/*---------------------------------

	4.3サイドメニュー付 子ページ

---------------------------------*/
.page #container #col_outer {
	
}

.page #container #col_outer #main {
	width: 100%;
}

.page #container #col_outer #sidebar {
	width: 100%;
}


/*  
  サイドメニューデザイン
---------------------------------*/
.page #container #col_outer #sidebar {
	border-top: 1px solid #dfd6cb;
}

/*::: 親ページリンク :::*/
.page #container #col_outer #sidebar .ttl {
	padding: 30px 0;
	border-bottom: 1px solid #dfd6cb;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.page #container #col_outer #sidebar .ttl a {
	display: block;
}

.page #container #col_outer #sidebar .ttl p {
   	color: #141414;
    line-height: 1;
	transition: all .3s;
}

.page #container #col_outer #sidebar .ttl span {
	color: #947852;
	font-size: 0.68em;
	font-style: italic;
	transition: all .3s;
}

.page #container #col_outer #sidebar .ttl a:hover {
	opacity: 1;
}

.page #container #col_outer #sidebar .ttl a:hover p,
.page #container #col_outer #sidebar .ttl a:hover span{
	color: #f03200;
}

/*::: 子ページリンク :::*/
.page #container #col_outer #sidebar ul{
	padding: 2.143em 0;
	list-style: none;
	font-size: 0.875em;
}

.page #container #col_outer #sidebar ul li{
	line-height: 1.3;
	margin-bottom: 1.429em;
	padding-left: 1em;
	position: relative;
}

.page #container #col_outer #sidebar ul li::before {
	content: '';
	width: 3px;
	height: 5px;
	background: url("../images/arrow03.svg") no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all .3s;
}

.page #container #col_outer #sidebar ul li a {
	display: block;
	color: #141414;
}

.page #container #col_outer #sidebar ul li a:hover {
	opacity: 1;
	color: #f03200;
}

.page #container #col_outer #sidebar ul li:hover::before {
	left: 5px;
}





/*==================================================================
	5.About（大学校案内）
==================================================================*/
/*---------------------------------

	5.1ヘッダー画像

---------------------------------*/
.about #head-ttl {
	background: url("../images/header_about.jpg") no-repeat center;
	background-size: cover;
}



/*---------------------------------

	5.2コンセプト・ミッション

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.campus #container section.col1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.about.campus #container section.col1 .text_wrap {
	width: 50%;
	margin-right: 50px;
}

.about.campus #container section.col1 figure {
	width: 45%;
}


/*  
  col2
---------------------------------*/
.about.campus #container section.col2 figure {
	margin-bottom: 30px;
}


@media screen and (max-width: 480px) {
    .about.campus #container section.col1 {
        display: block;
    }
    
    .about.campus #container section.col1 .text_wrap {
        width: 100%;
        margin: 0 0 20px;
    }
    
    .about.campus #container section.col1 figure {
        width: 100%;
    }
    
    .about.campus #container section.col2 figure {
        margin-bottom: 10px;
    }
}


/*---------------------------------

	5.3陶芸学科/研究科

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.department #container section.col1 .textArea {
	margin-bottom: 2em;
}

.about.department #container section.col1 dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: .8em;
}

.about.department #container section.col1 dl dt {
	width: 10%;
	font-weight: bold;
}

.about.department #container section.col1 dl dd {
	width: 88%;
	padding-left: 3%;
	border-left: 1px solid;
}

@media screen and (max-width: 480px) {
    .about.department #container section.col1 dl dt {
        width: 20%;
    }
    
    .about.department #container section.col1 dl dd {
        width: 75%;
    }
}


/*  
  col2
---------------------------------*/
.about.department #container section.col2 .section {
	display: flex;
	justify-content: space-between;
}

.about.department #container section.col2 .section h5 {
	width: 20%;
}

.about.department #container section.col2 .section table {
	width: 75%;
}

.about.department #container section.col2 .section table th {
	width: 30%;
}

.about.department #container section.col2 .section table th,
.about.department #container section.col2 .section table td {
	line-height: 1.3;
	padding: 1.2em 1em;
}

@media screen and (max-width: 480px) {
    .about.department #container section.col2 .section {
        display: block;
    }
    
    .about.department #container section.col2 .section h5 {
        width: 100%;
    }
    
    .about.department #container section.col2 .section table {
        width: 100%;
    }
}


/*  
  col3
---------------------------------*/
.about.department #container section.col3 .trainingBox {
	margin-top: 2.5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about.department #container section.col3 .trainingBox figure {
	width: 47%;
	margin-bottom: 5%;
}



/*---------------------------------

	5.4施設紹介

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.facility #container section.col1 .section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about.facility #container section.col1 .section div {
	width: 45%;
	margin-top: 5em;
}

.about.facility #container section.col1 .section p strong {
	display: block;
	padding-bottom: .4em;
	margin-bottom: .8em;
	color: #947852;
	font-size: 1.3em;
	border-bottom: 3px double;
}

.about.facility #container section.col1 .section p:nth-child(2) {
	display: block;
	min-height: 80px;
}

@media screen and (max-width: 480px) {
    .about.facility #container section.col1 .section div {
        width: 100%;
        margin-top: 2em;
    }  
    
    .about.facility #container section.col1 .section p:nth-child(2) {
        display: block;
        min-height: auto;
        margin-bottom: .5em;
    }

}



/*---------------------------------

	5.5講師紹介

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.teacher #container section.col1 .section {
	display: flex;
	justify-content: space-between;
}

.about.teacher #container section.col1 .section figure {
	width: 27%;
	text-align: left;
}

.about.teacher #container section.col1 .section figure figcaption p strong {
	display: block;
	padding-bottom: .5em;
	margin-bottom: .5em;
	font-size: 1.3em;
	border-bottom: 1px solid;
}

@media screen and (max-width: 480px) {
    .about.teacher #container section.col1 .section {
        display: block;
    }
    
    .about.teacher #container section.col1 .section figure {
        width: 100%;
        margin-bottom: .5em;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .about.teacher #container section.col1 .section figure img {
        width: 40%;
        height: auto;
    }
    
    .about.teacher #container section.col1 .section figure figcaption {
        width: 55%;
    }
}


/*  
  col2/col3
---------------------------------*/
.about.teacher #container section.specially .textArea {
	margin-bottom: 2.5em;
}

.about.teacher #container section.specially .section {
	display: flex;
	justify-content: space-between;
}

.about.teacher #container section.specially .section .img {
	width: 35%;
}

.about.teacher #container section.specially .section figure {
	margin-bottom: .5em;
}

.about.teacher #container section.specially .section .plf {
	width: 60%;
}

.about.teacher #container section.specially .section .plf p strong {
	display: block;
	margin-bottom: .5em;
	font-size: 1.2em;
}

/* プロフィール */
.about.teacher #container section.specially .section .plf dl.profile {
	margin-top: 1.5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about.teacher #container section.specially .section .plf dl.profile dt {
	width: 15%;
	margin-bottom: 1em;
}

.about.teacher #container section.specially .section .plf dl.profile dd {
	width: 85%;
	margin-bottom: 1em;
}

/* パブリックコレクション */
.about.teacher #container section.specially .section .plf dl.public {
	margin-top: 1.5em;
}

.about.teacher #container section.specially .section .plf dl.public dt {
	margin-bottom: .5em;
	font-weight: bold;
}

@media screen and (max-width: 480px) {
    
    .about.teacher #container section.specially .section {
        display: block;
    }
    
    .about.teacher #container section.specially .section .img {
        width: 100%;
        display: flex;
    }
    .about.teacher #container section.specially .section .img figure {
        width: 50%;
    }
    
    .about.teacher #container section.specially .section .plf {
        width: 100%;
    }
    
    .about.teacher #container section.specially .section .plf dl.profile dt {
        width: 25%;
    }
    
    .about.teacher #container section.specially .section .plf dl.profile dd {
        width: 75%;
    }
}


/*  
  col4/col5
---------------------------------*/
.about.teacher #container section.list .section {
	display: flex;
	justify-content: space-between;
}

.about.teacher #container section.list .section dl {
	width: 48%;
}

.about.teacher #container section.list .section dl dt {
	font-weight: bold;
}

.about.teacher #container section.list .section dl dd {
	margin-bottom: 1.3em;
	font-size: .85em;
}



/*---------------------------------

	5.6卒業生の進路

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.graduate #container section.col1 .section {
	margin-top: 2.5em;
	display: flex;
	justify-content: space-between;
}

.about.graduate #container section.col1 .section figure {
	width: 47%;
}

.about.graduate #container section.col1 table th,
.about.graduate #container section.col1 table td {
	width: auto;
	text-align: center;
}

.about.graduate #container section.col1 table td:nth-of-type(1) {
	text-align: left;
}

.about.graduate #container section.col1 table tr:nth-of-type(2) td {
	font-weight: bold;
}

.about.graduate #container section.col1 table + .textArea {
	margin-top: .8em;
}

@media screen and (max-width: 480px) {
    .about.graduate #container section.col1 table th,
    .about.graduate #container section.col1 table td {
        width: auto;
        text-align: center;
    }
    
    .about.graduate #container section.col1 table{
        overflow: auto;
        white-space: nowrap;
        display:block;
        width:auto;
    }
    
    .about.graduate #container section.col1 table tbody {
        width: 100%;
        display:table;
    }
    
    .about.graduate #container section.col1 table::-webkit-scrollbar {
        height: 5px;
    }
 
    .about.graduate #container section.col1 table::-webkit-scrollbar-track {
        background: #F1F1F1;
    }
    
    .about.graduate #container section.col1 table::-webkit-scrollbar-thumb {
        background: #BCBCBC;
    }
}


/*  
  col2
---------------------------------*/
.about.graduate #container section.col2 .section {
	display: flex;
	justify-content: space-between;
}

.about.graduate #container section.col2 .section .text_wrap {
	width: 60%;
}

.about.graduate #container section.col2 .section .text_wrap h4 {
	line-height: 1.3;
}


.about.graduate #container section.col2 .section .text_wrap p strong {
	display: block;
	margin-bottom: .5em;
	font-size: 1.2em;
}

/* プロフィール */
.about.graduate #container section.col2 .section .text_wrap dl {
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.about.graduate #container section.col2 .section .text_wrap dl dt {
	width: 15%;
	margin-bottom: 1em;
}

.about.graduate #container section.col2 .section .text_wrap dl dd {
	width: 85%;
	margin-bottom: 1em;
}

.about.graduate #container section.col2 .section figure {
	width: 35%;
}

.about.graduate #container section.col2 .section figure img {
	margin-bottom: .5em;
}

/* even */
.about.graduate #container section.col2 .section.even .text_wrap {
	order: 1;
}
.about.graduate #container section.col2 .section.even figure {
	order: -1;
}

@media screen and (max-width: 480px) {
    .about.graduate #container section.col2 .section {
        display: block;
    }
    .about.graduate #container section.col2 .section .text_wrap {
        width: 100%;
    }
    .about.graduate #container section.col2 .section figure {
        width: 100%;
    }
}

/*---------------------------------

	5.7沿革

---------------------------------*/
/*  
  col1
---------------------------------*/
.about.history #container section.col1 dl {
	margin-top: 2.5em;
	display: flex;
	flex-wrap: wrap;
}

.about.history #container section.col1 dl dt {
	width: 20%;
	padding: 1.5em .8em;
	border-bottom: 1px solid #E0D6C8;
}

.about.history #container section.col1 dl dd {
	width: 80%;
	padding: 1.5em .8em;
	border-bottom: 1px solid #E0D6C8;
}

.about.history #container section.col1 .history_img {
	display: flex;
	margin-top: 40px;
}

.about.history #container section.col1 .history_img img {
	height: 250px;
	object-fit: cover;
	width: 33.333%;
}

@media screen and (max-width: 480px) {
    .about.history #container section.col1 dl dt {
        width: 25%;
        padding: 1.5em 0em;
    }

    .about.history #container section.col1 dl dd {
        width: 75%;
        padding: 1.5em .8em;
    }
	
	.about.history #container section.col1 .history_img {
		display: block;
		margin-top: 30px;
	}
	
	.about.history #container section.col1 .history_img img {
		height: auto;
		width: 100%;
	}
}



/*==================================================================
	6.guide（入学案内）
==================================================================*/
/*---------------------------------

	6.1ヘッダー画像

---------------------------------*/
.guide #head-ttl {
	background: url("../images/header_guide.jpg") no-repeat center;
	background-size: cover;
}



/*---------------------------------

	6.2内容

---------------------------------*/
.guide #container .section {
	display: flex;
}

.guide #container .section h5 {
	width: 20%;
}

.guide #container .section .wrap {
	width: 80%;
}

@media screen and (max-width: 480px) {
    .guide #container .section {
        display: block;
    }
    
    .guide #container .section h5 {
        width: 100%;
        margin-bottom: 1.5em;
    }
    
    .guide #container .section .wrap {
        width: 100%;
    }
}


/*  
  col1
---------------------------------*/
.guide #container .col1 .section .wrap {
	display: flex;
	justify-content: space-between;
}

.guide #container .col1 .section .wrap table {
	width: 65%;
	height: 100%;
}

.guide #container .col1 .section .wrap figure {
	width: 30%;
}

@media screen and (max-width: 480px) {
    .guide #container .col1 .section .wrap {
        display: block;
    }
    
    .guide #container .col1 .section .wrap table {
        width: 100%;
        margin-bottom: 1.5em;
    }
    
    .guide #container .col1 .section .wrap table th {
        width: 30%;
    }
    
    .guide #container .col1 .section .wrap figure {
        width: 100%;
    }
}


/*  
  col2
---------------------------------*/
.guide #container .col2 ul li table {
	width: 100%;
	margin: .8em 0 1.5em;
}

.guide #container .col2 ul li table th,
.guide #container .col2 ul li table td {
	width: 50%;
}

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


/*  
  col3
---------------------------------*/
.guide #container .col3 table {
	width: 50%;
	margin: .8em 0 0;
}

.guide #container .col3 table th {
	width: 60%;
}

.guide #container .col3 table td {
	width: 40%;
}

@media screen and (max-width: 480px) {
    .guide #container .col3 table {
        width: 100%;
    }
}


/*  
  col4
---------------------------------*/
.guide #container .col4 table {
	margin-bottom: .8em;
}

.guide #container .col4 table th {
	width: 20%;
}

.guide #container .col4 table td {
	width: 80%;
}

@media screen and (max-width: 480px) {
    .guide #container .col4 table th {
        width: 30%;
    }
}


/*  
  col5
---------------------------------*/
.guide #container .col5 .textArea {
	text-align: center;
}


/*  
  画像付きメニュー
---------------------------------*/
.guide #container #menu_wrapper .menu_list {
	display: flex;
	justify-content: space-around;
}



/*---------------------------------

	6.3入学に関するQ&A

---------------------------------*/
.guide.qa #container section dl {
	margin-bottom: 2.5em;
	border: 1px solid #DFD6CB;
}

/* 質問 */
.guide.qa #container section dl dt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
}

.guide.qa #container section dl dt span {
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 1.563em;
	text-align: center;
	color: #fff;
	background: #947852;
}

.guide.qa #container section dl dt p {
	width: 85%;
}


/* + */
.guide.qa #container section dl dt::before {
	content: '';
	width: 2px;
	height: 20px;
	background: #DFD6CB;
	position: absolute;
	right: 29px;
	top: 0;
	bottom: 0;
	margin: auto;
	-moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
.guide.qa #container section dl dt::after {
	content: '';
	width: 20px;
	height: 2px;
	background: #DFD6CB;
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
}

/* +回答が開いた時  */
.guide.qa #container section dl dt.active::before {
	content: '';
	right: 30px;
	top: 0;
	bottom: 0;
	margin: auto;
	-moz-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
	transform:rotate(270deg);
}
.guide.qa #container section dl dt.active::after {
	content: none;
}

/* 回答 */
.guide.qa #container section dl dd {
	display: none;
	background: #EFEBE5;
}

.guide.qa #container section dl dd div{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 0;
}

.guide.qa #container section dl dd span {
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 1.563em;
	text-align: center;
	color: #141414;
	border-right: 1px solid;
}

.guide.qa #container section dl dd p {
	width: 85%;
	padding: 1em 2.4em 1em 0;
	text-align: justify;
}

@media screen and (max-width: 480px) {
    .guide.qa #container section dl {
        margin-bottom: 1.2em;
    }
    
    .guide.qa #container section dl dt p {
        padding: 0 30px 0 10px;
        font-size: .9em;
        line-height: 1.5;
    }
    
    .guide.qa #container section dl dt span,
    .guide.qa #container section dl dd span {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 1.2em;
    }
    
    /* + */
    .guide.qa #container section dl dt::before {
        height: 16px;
        right: 13px;
    }
    
    .guide.qa #container section dl dt::after {
        width: 16px;
        right: 6px;
    }
    
    /* +回答が開いた時  */
    .guide.qa #container section dl dt.active::before {
        right: 14px;
    }
    
    .guide.qa #container section dl dd div{
        padding: .5em 0;
    }
    
    .guide.qa #container section dl dd p {
        padding: 0 10px 0 10px;
        font-size: .9em;
        line-height: 1.5;
    }
}





/*==================================================================
	7.exhibition（展覧会・受賞者）
==================================================================*/
/*---------------------------------

	7.1ヘッダー画像

---------------------------------*/
.exhibition #head-ttl {
	background: url("../images/header_exhibition.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	7.2内容

---------------------------------*/
.exhibition #container section figure + .textArea {
	margin: 2.5em 0;
}

.exhibition #container section dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.exhibition #container section dl dt,
.exhibition #container section dl dd {
	margin-bottom: 1.5em;
	line-height: 2;
}

.exhibition #container section dl dt {
	width: 15%;
	text-align: center;
	color: #fff;
	background: #947852;
}

.exhibition #container section dl dd {
	width: 78%;
}

.exhibition #container section dl dd p a {
    color: #FF6F4A;
	text-decoration: underline;
}

.exhibition #container section dl dd p a:hover {
	color: #F03200;
	opacity: 1;
	text-decoration: none;
}

@media screen and (max-width: 480px) {
    .exhibition.event #container section figure + .textArea {
        text-align: left;
        margin: 2.5em 0;
    }
    
    .exhibition #container section dl dt {
        display: block;
    }
    
    .exhibition #container section dl dt {
        width: auto;
        padding: 0 .5em;
        margin-bottom: .5em;
    }
    .exhibition #container section dl dd {
        width: 100%;
    }
}


/*  
  .section 内 日時・ポスターなど
---------------------------------*/
.exhibition #container section .section {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.exhibition #container section .date.section figure {
	width: 45%;
    max-width: 200px;
	margin-right: 4em;
}

@media screen and (max-width: 480px) {
    .exhibition #container section .section {
        display: block; 
    }
    
    .exhibition #container section .date.section figure {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin: 0 auto 2em;
    }
}


/*  
  .section 内 （卒業生情報）
---------------------------------*/
.exhibition #container section h4 + p.subttl {
    margin-top: -1.5em;
    margin-bottom: 2.5em;
    line-height: 1.7;
    font-size: 20px;
    text-align: center;
}

.exhibition.grabuate #container section .date.section figure {
	width: 100%;
    max-width: 400px;
    margin-right: 3em;
}

.exhibition.grabuate #container section .date.section dl {
    width: 43%;
	display: block;
}

.exhibition.grabuate #container section .date.section dl dt {
	width: auto;
    display: inline-block;
    padding: 0 .5em;
	text-align: center;
	color: #fff;
	background: #947852;
}

.exhibition.grabuate #container section .date.section dl dd {
	width: 100%;
}

@media screen and (max-width: 480px) {
    .exhibition #container section h4 + p.subttl {
        margin-top: 0em;
        margin-bottom: 1.5em;
        line-height: 1.7;
        font-size: 18px;
    }
    
    .exhibition.grabuate #container section .date.section dl {
        width: 100%;
    }
    
    .exhibition.grabuate #container section .date.section dl dt {
        margin-bottom: .5em;
        
    }
    
}


/*---------------------------------

	7.3受賞者

---------------------------------*/
.exhibition.winning #container section table th {
    width: 32%;
}

.exhibition.winning #container section table td:nth-of-type(1) {
    width: 15%;
    text-align: center;
}

.exhibition.winning #container section table td:nth-of-type(2) {
    width: 20%;
    text-align: center;
}

.exhibition.winning #container section table td:nth-of-type(3) {
    width: 25%;
}

@media screen and (max-width: 480px) {
    .exhibition.winning #container section table {
        border-bottom: 1px solid #E0D6C8;
    }
    
    .exhibition.winning #container section table th,
    .exhibition.winning #container section table td {
        border-bottom: none;
    }
    
    .exhibition.winning #container section table th {
        display: block;
        width: 100%;
    }
    
    .exhibition.winning #container section table td:nth-of-type(1) {
        display: block;
        width: 100%;
        padding: .3em 1em;
        text-align: left;
        background: #F3EFE9;
        color: #947852;
    }
    
    .exhibition.winning #container section table td:nth-of-type(2){
        display: block;
        width: 100%;
        text-align: center;
        padding-bottom: 0;
    }
    
    .exhibition.winning #container section table td:nth-of-type(3){
        display: block;
        width: 100%;
        padding-top: 0;
        text-align: center;
        border-top: none;
    }
    
    .exhibition.winning #container section table td br {
        display: none;
    }
}



/*==================================================================
	8.training（講習会・研修会）
==================================================================*/
/*---------------------------------

	8.1ヘッダー画像

---------------------------------*/
.training #head-ttl {
	background: url("../images/header_training.jpg") no-repeat center;
	background-size: cover;
}

.exhibition #container #menu_wrapper {
	margin: auto;
	max-width: 700px;
}
.exhibition #container #menu_wrapper .menu_list_img .box {
	width: 50%;
	margin-bottom: 2em;
}

/*---------------------------------

	8.2内容

---------------------------------*/
.training #container .description {
	margin-bottom: 3em;
}

.training #container .description p strong{
	text-decoration: underline;
}


/*  
  section 内
---------------------------------*/
.training #container section h6 {
	margin-bottom: 1.8em;
}

.training #container section h6 + .textArea {
	margin-top: -1.2em;
}

.training #container section table th,
.training #container section table td {
	width: auto;
}

.training #container section table th {
	text-align: center;
}

.training #container section dl {
	margin-top: 2em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.training #container section dl dt,
.training #container section dl dd {
	margin-bottom: .8em;
	line-height: 2;
}

.training #container section dl dt {
	width: 10%;
	text-align: center;
	color: #fff;
	background: #947852;
}

.training #container section dl dd {
	width: 86%;
}


/*  
  .section 内
---------------------------------*/
.training #container section .section + hr {
	margin-bottom: 4.5em;
}

.training #container section .section {
	display: flex;
	justify-content: space-between;
}

.training #container section .section h5 {
	width: 20%;
}

.training #container section .section .wrap {
	width: 80%;
}


/*  
  平成28年度の情報
---------------------------------*/
.training #container section.h28date .article {
	margin-bottom: 2.5em;
}


@media screen and (max-width: 480px) {
    .training #container section table {
        border-bottom: 1px solid #E0D6C8;
    }
    
    .training #container section table .thead {
        display: none;
    }
    
    .training #container section table tr {
        width: 100%;
    }
    
    .training #container section table th {
        display: block;
        font-weight: bold;
        text-align: center;
        border-bottom: none;
    }
    
    .training #container section table td {
        display: flex;
        text-align: left;
        width: 100%;
        border-bottom: none;
    }
    
    .training #container section table td:before {
        min-width: 3em;
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }
    
    /*特別講座5*/
    .training #container section table.kouza5 td.content {
        padding-bottom: 0em;
    }
    .training #container section table.kouza5 td.place {
        border-top: none;
    }
    
    /* 講師・内容・場所 */
    .training #container section dl dt,
    .training #container section dl dd {
        margin-bottom: 1em;
        line-height: 1.5;
    }

    .training #container section dl dt {
        width: 17%;
    }
    
    .training #container section dl dd {
        width: 78%;
    }
    
    /*  
    .section 内
    ---------------------------------*/
    .training #container section .section + hr {
        margin-bottom: 2.5em;
    }

    .training #container section .section {
        display: block;
    }
    
    .training #container section .section h5 {
        width: 100%;
        margin-bottom: 1.5em;
    }

    .training #container section .section .wrap {
        width: 100%;
    }
}





/*==================================================================
	9.exam（依頼試験・設備利用）
==================================================================*/
/*---------------------------------

	9.1ヘッダー画像

---------------------------------*/
.exam #head-ttl {
	background: url("../images/header_exam.jpg") no-repeat center;
	background-size: cover;
}



/*---------------------------------

	9.2技術相談・指導

---------------------------------*/
/*  
  col1
---------------------------------*/
.exam.guidance #container section.col1 .section {
	margin: 2.5em 0 0;
	display: flex;
	justify-content: space-between;
}

.exam.guidance #container section.col1 .section figure {
	width: 48%;
}

@media screen and (max-width: 480px) {
    .exam.guidance #container section.col1 .section {
        margin: 2.5em 0 0;
        display: block;
    }

    .exam.guidance #container section.col1 .section figure {
        width: 100%;
        margin-bottom: 1.5em;
    }
}


/*  
  col2
---------------------------------*/
.exam.guidance #container section.col2 p.tablecap {
	margin: 1em 0 0;
	font-weight: bold;
}

.exam.guidance #container section.col2 table {
	margin: .5em 0 0;
}

.exam.guidance #container section.col2 table th,
.exam.guidance #container section.col2 table td {
	width: auto;
}

.exam.guidance #container section.col2 table td {
	text-align: center;
}

@media screen and (max-width: 480px) {
    .exam.guidance #container section.col2 table {
        border-bottom: 1px solid #E0D6C8;
    }
    
    .exam.guidance #container section.col2 table th,
    .exam.guidance #container section.col2 table td {
        width: 100%;
        display: block;
        border-bottom: none;
    }
}



/*---------------------------------

	9.3依頼試験・分析

---------------------------------*/
/*  
  col1
---------------------------------*/
.exam.analysis #container section.col1 .section {
	display: flex;
	justify-content: space-between;
}

.exam.analysis #container section.col1 .section .wrap {
	width: 40%;
}

.exam.analysis #container section.col1 .section figure {
	width: 55%;
}

@media screen and (max-width: 480px) {
    .exam.analysis #container section.col1 .section {
        display: block;
    }
    
    .exam.analysis #container section.col1 .section .wrap {
        width: 100%;
        margin-bottom: 1em;
    }
    
    .exam.analysis #container section.col1 .section figure {
        width: 100%;
    }
}


/*  
  col2
---------------------------------*/
.exam.analysis #container section.col2 table th.pc_none {
    display: none;
}

.exam.analysis #container section.col2 table th:nth-of-type(1),
.exam.analysis #container section.col2 table td:nth-of-type(1) {
	width: 30%;
}

.exam.analysis #container section.col2 table th:nth-of-type(2),
.exam.analysis #container section.col2 table td:nth-of-type(2) {
	width: 20%;
}

.exam.analysis #container section.col2 table th:nth-of-type(3),
.exam.analysis #container section.col2 table td:nth-of-type(3) {
	width: 50%;
}

@media screen and (max-width: 480px) {
    .exam.analysis #container section.col2 table {
        width: 100%;
        border-bottom: 1px solid #E0D6C8;
    }
    
    .exam.analysis #container section.col2 table th.pc_none {
        display: block;
        width: 100%;
        text-align: center;
        padding: .2em 0;
    }
    
    .exam.analysis #container section.col2 table th:nth-of-type(1),
    .exam.analysis #container section.col2 table td:nth-of-type(1),
    .exam.analysis #container section.col2 table th:nth-of-type(2),
    .exam.analysis #container section.col2 table td:nth-of-type(2),
    .exam.analysis #container section.col2 table th:nth-of-type(3),
    .exam.analysis #container section.col2 table td:nth-of-type(3) {
        width: 100%;
        border-bottom: none;
    }    
    
    .exam.analysis #container section.col2 table .thead {
        display: none;
    }
    
    .exam.analysis #container section.col2 table tr {
        width: 100%;
    }
    
    .exam.analysis #container section.col2 table td {
        display: flex;
        text-align: left;
        width: 100%;
    }
    
    .exam.analysis #container section.col2 table td:before {
        min-width: 100px;
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }
}



/*---------------------------------

	9.4設備機器の利用

---------------------------------*/
/*  
  col1
---------------------------------*/
.exam.equipment #container section.col1 .section {
	margin: 2.5em 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.exam.equipment #container section.col1 .section figure {
	width: 32%;
	margin-bottom: 1.8em;
}

@media screen and (max-width: 480px) {
    .exam.equipment #container section.col1 .section figure {
        width: 48%;
        margin-bottom: 1.8em;
    }
}

/*  
  col2
---------------------------------*/
.exam.equipment #container section.col2 table th.pc_none {
    display: none;
}

.exam.equipment #container section.col2 table th:nth-of-type(1),
.exam.equipment #container section.col2 table td:nth-of-type(1) {
	width: 30%;
}

.exam.equipment #container section.col2 table th:nth-of-type(2),
.exam.equipment #container section.col2 table td:nth-of-type(2) {
	width: 25%;
}

.exam.equipment #container section.col2 table th:nth-of-type(3),
.exam.equipment #container section.col2 table td:nth-of-type(3) {
	width: 45%;
}

@media screen and (max-width: 480px) {
    .exam.equipment #container section.col2 table {
        width: 100%;
        border-bottom: 1px solid #E0D6C8;
    }
    
    .exam.equipment #container section.col2 table th.pc_none {
        display: block;
        width: 100%;
        text-align: center;
        padding: .2em 0;
    }
    
    .exam.equipment #container section.col2 table th:nth-of-type(1),
    .exam.equipment #container section.col2 table td:nth-of-type(1),
    .exam.equipment #container section.col2 table th:nth-of-type(2),
    .exam.equipment #container section.col2 table td:nth-of-type(2),
    .exam.equipment #container section.col2 table th:nth-of-type(3),
    .exam.equipment #container section.col2 table td:nth-of-type(3) {
        width: 100%;
        border-bottom: none;
    }    
    
    .exam.equipment #container section.col2 table .thead {
        display: none;
    }
    
    .exam.equipment #container section.col2 table tr {
        width: 100%;
    }
    
    .exam.equipment #container section.col2 table td {
        display: flex;
        text-align: left;
        width: 100%;
    }
    
    .exam.equipment #container section.col2 table td:before {
        min-width: 110px;
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }
}


/*==================================================================
	10.opencampus（オープンキャンパス）
==================================================================*/
/*---------------------------------

	10.1ヘッダー画像

---------------------------------*/
.opencampus #head-ttl {
	background: url("../images/header_opencampus.jpg") no-repeat center;
	background-size: cover;
}



/*---------------------------------

	10.2内容

---------------------------------*/
/*  
  col1
---------------------------------*/
.opencampus #container section.col1 table {
	margin: 2.5em 0;
}

.opencampus #container section.col1 table th,
.opencampus #container section.col1 table td {
	width: auto;
}

.opencampus #container section.col1 table th,
.opencampus #container section.col1 table td:nth-of-type(1) {
	text-align: center;
}

.opencampus #container section.col1 .section {
	margin-bottom: 3.5em;
}

.opencampus #container section.col1 .section .img_wrap {
	display: flex;
	justify-content: space-between;
}

.opencampus #container section.col1 .section .img_wrap figure {
	width: 23%;
}

/* 実施内容・申込方法 */
.opencampus #container section.col1 .section.sec2 {
	margin-top: 3.5em;
	display: flex;
	justify-content: space-between;
}

.opencampus #container section.col1 .section.sec2 h5 {
	width: 20%;
}

.opencampus #container section.col1 .section.sec2 .textArea {
	width: 80%;
}

@media screen and (max-width: 480px) {
    .opencampus #container section.col1 table {
        width: 100%;
        border-bottom: 1px solid #E0D6C8;
    }
    
    .opencampus #container section.col1 table .thead {
        display: none;
    }
    
    .opencampus #container section.col1 table tr {
        width: 100%;
    }
    
    .opencampus #container section.col1 table td {
        text-align: left;
        width: 100%;
        display: flex;
        border-bottom: none;
    }
    
    .opencampus #container section.col1 table td:first-child {
        display: block;
        color: #666;
        background: #f4f4f4;
        font-weight: bold;
        text-align: center;
    }
    
    .opencampus #container section.col1 table td:before {
        content: attr(data-label);
        width: 3em;
        font-weight: bold;
        margin-right: 10px;
    }
    
    .opencampus #container section.col1 .section .img_wrap {
        flex-wrap: wrap;
    }
    
    .opencampus #container section.col1 .section .img_wrap figure {
        width: 48%;
        margin-bottom: 1.5em;
    }
    
    /* 実施内容・申込方法 */
    .opencampus #container section.col1 .section.sec2 {
        margin-top: 3.5em;
        display: block;
    }

    .opencampus #container section.col1 .section.sec2 h5 {
        width: 100%;
        margin-bottom: 1.5em;
    }

    .opencampus #container section.col1 .section.sec2 .textArea {
        width: 100%;
    }
    
    .opencampus #container section .textArea p.mail {
        text-align: left !important;
    }
}


/*  
  col2
---------------------------------*/
.opencampus #container section.col2 .wrap {
	display: flex;
	justify-content: space-between;
}

.opencampus #container section.col2 .wrap figure {
	width: 30%;
}

.opencampus #container section.col2 .wrap .text_wrap {
	width: 65%;
}

@media screen and (max-width: 480px) {
    .opencampus #container section.col2 .wrap {
        display: block;
    }

    .opencampus #container section.col2 .wrap figure {
        width: 80%;
        margin: 0 auto 3em;
    }

    .opencampus #container section.col2 .wrap .text_wrap {
        width: 100%;
    }
    
    .opencampus #container section.col2 .wrap .text_wrap .section {
        display: flex;
        justify-content: space-between;
    }
    
    .opencampus #container section.col2 .wrap .text_wrap .section h5 {
        width: 30%;
        margin-bottom: 0;
    }
    
    .opencampus #container section.col2 .wrap .text_wrap .section .textArea {
        width: 65%;
    }
}





/*==================================================================
	11.access（アクセス）
==================================================================*/
/*---------------------------------

	11.1ヘッダー画像

---------------------------------*/
.access #head-ttl {
	background: url("../images/header_access.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	11.2内容

---------------------------------*/
.access #container section .textArea {
	text-align: center;
}

.access #container section dl {
	width: 90%;
	margin: 2em auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.access #container section dl dt {
	width: 20%;
	margin-bottom: 20px;
	text-align: center;
}

.access #container section dl dt strong {
	display: block;
	position: relative;
}

.access #container section dl dt strong::before {
	content: '';
	width: 5%;
	height: 1px;
	background: #141414;
	position: absolute;
	top: 0;
	right: 35px;
	bottom: 0;
	margin: auto;
}

.access #container section dl dd {
	width: 80%;
	margin-bottom: 20px;
}

.access #container section .map {
	margin-top: 3em;
	position: relative;
}

.access #container section .map::before,
.access #container section .map::after {
  position: absolute;
  bottom: 10px;
  z-index: -1;
  content: '';
  width: 50%;
  height: 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.access #container section .map::before {
  left: 10px;
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.access #container section .map::after {
  right: 10px;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
}

.access #container section iframe {
	vertical-align: bottom;
}

@media screen and (max-width: 480px) {
    .access #container section dl {
	width: 100%;
    }
}


/*==================================================================
	12.contact（お問い合わせ）
==================================================================*/
/*---------------------------------

	12.1ヘッダー画像

---------------------------------*/
.contact #head-ttl {
	background: url("../images/header_contact.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	12.2内容

---------------------------------*/
.contact #container section .textArea {
	text-align: center;
}

.contact #container section .section {
	margin-top: 4.5em;
	display: flex;
	justify-content: space-between;
}

.contact #container section .section dl {
	width: 45%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contact #container section .section dl dt {
	width: 35%;
	position: relative;
}

.contact #container section .section dl dt strong {
	background: #fff;
	padding: 0 .8em 0 0;
	display: inline-block;
	position: relative;
	z-index: 1;
}

.contact #container section .section dl dt::before {
	content: '';
	width: 90%;
	height: 1px;
	background: #141414;
	position: absolute;
	top: 12px;
	right: 10%;
}

.contact #container section .section dl dd {
	width: 65%;
}

.contact #container section .section figure {
	width: 50%;
	order: -1;
}

@media screen and (max-width: 480px) {
    .contact #container section .section {
        margin-top: 2.5em;
        display: block;
    }
    
    .contact #container section .section dl {
        width: 100%;
        display: block;
    }
    
    .contact #container section .section dl dt,
    .contact #container section .section dl dd {
        width: 100%;
    }
    
    .contact #container section .section dl dt::before {
        width: 100%;
        right: 0;
        left: 0;
    }
    
    .contact #container section .section dl dd {
        margin: .8em 0 1.5em;
    }
    
    .contact #container section .section figure {
        width: 100%;
    }
}



/*==================================================================
	13.policy（サイトポリシー）
==================================================================*/
/*---------------------------------

	13.1ヘッダー画像

---------------------------------*/
.policy #head-ttl {
	background: url("../images/header_about.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	13.2内容

---------------------------------*/
.policy #container section .section + hr {
	padding-bottom: 3.5em;
}

@media screen and (max-width: 480px) {
    .policy #container section .section h5 {
        margin-bottom: 1.5em;
    }
    
    .policy #container section .section + hr {
        padding-bottom: 2em;
    }
}





/*==================================================================
	14.link（リンク）
==================================================================*/
/*---------------------------------

	14.1ヘッダー画像

---------------------------------*/
.link #head-ttl {
	background: url("../images/header_about.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	14.2内容

---------------------------------*/
.link #container section .section {
	display: flex;
}

.link #container section .section h5 {
	width: 35%;
}

.link #container section .section ul {
	width: 65%;
	margin: 0;
}

.link #container section .section ul li a {
	padding-right: 1.5em;
	position: relative;
	color: #FF6F4A;
}

.link #container section .section ul li a:hover {
	opacity: 1;
	color: #F03200;
	text-decoration: underline;
}

.link #container section .section h5.kikan {
	line-height: 1.5;
}

.link #container section .section + hr {
	padding-bottom: 3.5em;
}

.link #container section .section ul li a br.pc_none {
    display: none;
}

@media screen and (max-width: 480px) {
    .link #container section .section {
        display: block;
    }
    
    .link #container section .section h5 {
        width: 100%;
        margin-bottom: 1.5em;
    }
    
    .link #container section .section ul {
        width: 100%;
    }
    
    .link #container section .section + hr {
        padding-bottom: 2em;
    }
    
    .link #container section .section ul li a br.pc_none {
        display: block;
    }
}





/*==================================================================
	15.info（お知らせ）
==================================================================*/
/*---------------------------------

	15.1ヘッダー画像

---------------------------------*/
.info #head-ttl {
	background: url("../images/header_info.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	15.2内容

---------------------------------*/
.info #container section dl {
	border-bottom: 1px solid #E6E6E6;
}

.info #container section dl a {
	padding: 1em 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info #container section dl dt {
	width: 15%;
	color: #947852;
	font-size: 0.875em;
}

.info #container section dl dd {
	width: 85%;
	color: #141414;
	transition: all .3s;
}

.info #container section dl a:hover dd {
	color: #F03200;
}

@media screen and (max-width: 480px) {
    .info #container section dl a {
        display: block;
    }
    
    .info #container section dl dt {
        width: 100%;
    }
    
    .info #container section dl dd {
        width: 100%;
    }
}



/*---------------------------------

	15.3お知らせ詳細内容

---------------------------------*/
.info #container section.content .wrap {
	width: 90%;
    margin: 0 auto;
}

.info #container section.content .day {
    display: block;
    text-align: right;
    color: #5F5F5F;
    font-size: .9em;
    letter-spacing: 2px;
}

/*  
  テキスト
---------------------------------*/
.info #container section.content p {
	text-align: justify;
	line-height: 2;
    margin-bottom: .5em;
}

.info #container section.content p:last-child {
	margin-bottom: 0;
}

.info #container section.content a{
	color: #FF6F4A;
	text-decoration: underline;
}

.info #container section.content a:hover {
	color: #F03200;
	opacity: 1;
	text-decoration: none;
}


/*  
  テーブル
---------------------------------*/
.info #container section.content table {
    margin: 1em 0;
}

.info #container section.content table,
.info #container section.content table th,
.info #container section.content table td {
    width: auto;
}





/*==================================================================
	16.topics（トピックス）
==================================================================*/
/*---------------------------------

	16.1ヘッダー画像

---------------------------------*/
.topics #head-ttl {
	background: url("../images/header_topics.jpg") no-repeat center;
	background-size: cover;
}


/*---------------------------------

	16.2内容

---------------------------------*/
.topics #container section dl {
	border-bottom: 1px solid #E6E6E6;
}

.topics #container section dl a {
	padding: 1.8em 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.topics #container section dl dt {
	width: 25%;
}

.topics #container section dl dt figure {
	width: 100%;
	max-height: 160px;
	overflow: hidden;
}

.topics #container section dl dd {
	width: 70%;
}

.topics #container section dl dd p {
	display: block;
	color: #141414;
	transition: all .3s;
}

.topics #container section dl dd span {
	margin-top: 1em;
	padding: .5em 0;
	border-top: 1px solid;
	color: #947852;
	display: block;
	font-size: 0.875em;
}

.topics #container section dl a:hover dd p {
	color: #F03200;
}

.topics #container section dl a.link_none {
	pointer-events: none;
}
.topics #container section dl a.link_none:hover {
	opacity: 1;
    cursor: auto;
}

@media screen and (max-width: 480px) {
    .topics #container section dl a {
        padding: 1.8em 0;
        display: block;
    }
    
    .topics #container section dl dt {
        width: 80%;
        margin: 0 auto 1em;
    }
    .topics #container section dl dt figure {
        width: 100%;
        max-height: 100%;
        overflow: hidden;
    }
    
    .topics #container section dl dd {
        width: 100%;
    }
}





/*==================================================================*/
/*---------------------------------

	17.pagetop

---------------------------------*/
#page-top {
	position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1;
}

#page-top a {
    background: #947852;
    text-decoration: none;
    color: #fff;
    width: 50px;
    height: 50px;
    text-align: center;
    display: block;
    border-radius: 50%;
	position: relative;
}

#page-top a .arrow{
    display: block;    
}

#page-top a .arrow::before{
	content: '';
	width: 10px;
	height: 6px;
	background: url("../images/arrow05.svg") no-repeat;
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
	right: 0;
    margin: auto;
	transition: all .3s;
}

#page-top a:hover {
	opacity: 1;
    text-decoration: none;
    background: #755429;
}

#page-top a:hover .arrow::before{
	top: -10px;
}





/*---------------------------------

	18.footer

---------------------------------*/
footer {
	background: #EBEBEB;
}

footer .wrap {
	width: 90%;
	margin: 0 auto;
}


/*  
  フッターメニュー
---------------------------------*/
footer > .wrap {
	padding: 1.5em 0 1em;
	position: relative;
}

footer .wrap .siteMapttl {
    display: none;
        
}

footer .wrap .fnav .inner {
	display: flex;
    justify-content: space-between;
}

footer .wrap .fnav ul {
	margin-right: 4%;
}

footer .wrap .fnav ul:last-child {
	margin-right: 0;
}

footer .wrap .fnav ul li a {
	color: #000;
	font-size: 0.938em;
	line-height: 2.133em;
}

/*::: 子メニュー :::*/
footer .wrap .fnav ul li ul.child li {
	position: relative;
}

footer .wrap .fnav ul li ul.child li a::before {
	content: '-';
	padding-right: 3px;
	color: #5A5A5A;
	display: inline-block;
}

footer .wrap .fnav ul li ul.child li a {
	color: #5A5A5A;
}


@media screen and (max-width:530px) {
    footer .wrap .siteMapttl {
        display: block;
        width: 100%;
        padding: .5em 0;
        background: #F03200;
        text-align: center;
        pointer-events: all;
        color: #fff;
    }
    
    footer .wrap .siteMapttl p {
        display: inline-block;
        padding-left: 0;
        position: relative;
    }
    
    footer .wrap .fnav {
        display: none;
    }
    
    footer .wrap .fnav .inner {
        flex-wrap: wrap;
        margin-top: 1.5em;
    }
    
	footer .wrap .fnav ul {
		width: 47%;
        margin: 0;
	}
    
    footer .wrap .fnav ul li {
        display: block;
    }
    
    footer .wrap .fnav ul li a {
        color: #000;
        font-size: 0.938em;
        line-height: 1.3;
        margin-bottom: 0.8em;
        display: inline-block;
    }
    
    footer .wrap .fnav ul li ul.child {
	    width: auto;
    }	
	
}


/*  
  Facebook
---------------------------------*/
footer .wrap .fbwrap {
    width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

footer .wrap .fbwrap {
	
}

footer .wrap .fbwrap .box {
	width: 100%;
	height: 330px;
	padding: 5px;
	border: 1px solid #ccc;
}

.facebook-wrapper {
    max-width: 500px;
	height: 320px;
    margin: 0 auto;
}

.facebook-wrapper > .fb-page {
    width: 100%;
	height: 100%;
}

.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
	height: 100% !important;
}

@media screen and (max-width:580px) {
	footer .wrap .fbwrap {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
    
	.facebook-wrapper {
		max-width: 330px;
		height: 320px;
		margin: 0 auto;
	}
}

footer .wrap .facebook {
	width: 150px;
	height: auto;
	margin: 1.5em auto 0;
}

footer .wrap .facebook img {
	width: 100%;
	height: auto;
}


/*  
  アドレス/コピーライト
---------------------------------*/
footer .container {
	color: #fff;
	background: #737373;
}

footer .container .wrap {
	padding: 1.563em 0;
	align-items: flex-end;
}

footer .container p.address strong {
	display: block;
	margin-bottom: 0.2em;
	font-size: 1.375em;
	font-weight: normal;
}

footer .container p.address span {
	display: block;
	font-size: 0.875em;
}

footer .container p.copy small {
	display: block;
	font-size: 0.75em;
}

footer .container p.address br {
    display: none;
}

@media screen and (max-width: 480px) {
    footer .container p.address br {
        display: block;
    }
}