@charset "utf-8";

*{
	/*outline: 1px #f00 solid;*/
	margin:0;
    padding: 0;
}

/* body全体の初期スタイル調整 */
body {
  font-size: 16px;
  line-height: 1.5rem;
  font-family:"Helvetica Neue", YuGothic, "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
  color: #333;
}

/* 各要素の初期スタイル調整 */
h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.5rem;
  color: #333;
}
a {
  color: #032559;
  text-decoration: none;
}
a:hover {
  color: #032559;
  text-decoration: underline;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
ul {
  margin: 5px 0;
  padding: 0;
  list-style: none;
}
figure {
  margin: 0;
}
img{
    width:100%;
    height:auto;
    vertical-align: bottom;
}
/*--------------------------------
  320以上のサイズ（SP及び共通の設定）
-------------------------------- */

/*loaderの配置（loaderのデザインはoption.css参照）*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
	z-index:9999;
	background-color:rgba(80,126,164,0.80);/*背景色設定、薄縹（うすはなだ）色*/
}
/*スマホの時にできる右側の余白を消すための設定*/
#wrapper{
	overflow: hidden; 
}
/*headerの設定*/
.h_inner{
	padding:10px 10px 100px;
	height: 70vh;
}

h1{
	text-align: right;
	margin-top: 20px;
}

/*ハンバーガーアイコンの設置（アイコンのデザインはoption.css参照）*/
#toggle {
	display: block;
	text-align: center;
	width: 55px;
	height: 55px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1001;
	color: #fff;
	cursor: pointer;
	}

/*===グローバルナビ===*/
/*spのg_navの設定（open状態）*/
.toggleWrap {
	background-color: rgba(21,21,21,0.7);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
}
.mainNav{
    position: absolute;
    z-index: 2000;
    top:50%;
	left:50%;
    transform: translate(-50%,-50%);
}
.mainNav li {
	list-style-type: none;
    text-align: center;
	margin-bottom: 20px;
}
.navItem {
	font-family: 'IM Fell DW Pica', serif;/*<-Google Fonts*/
	color: #fff;
	text-decoration: none;
	padding:5px;
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
}
.navItem:hover {
	color: #999;
	font-weight: bold;
	text-decoration: none;
}

/*spのg_nav設定（hidden状態）*/
.hide {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}
.animation {
	transition-property:visibility;
	transition-duration: .5s;
	transition-timing-function: ease-in;
}
.no-scroll {
	overflow: hidden;
}
/*===グローバルナビ ここまで===*/

/*===言語選択の設定===*/
.lang_area{
	width: 80px;
	margin-top: 55px;
	margin-left: auto;
	margin-right: 0px;
	text-align: center;
}
.language{	
	line-height: 1.0rem;
	padding: 0px;
	text-align: right;
}
.language a{
	color: #fff;
	font-family: 'IM Fell DW Pica', serif;/*Google Fonts*/
	padding:5px 10px;	
  	background: #777;
	display: inline-block;
	border-radius:3px;
  	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  	transition: .3s;
}
.language a:hover{
	text-decoration: none;
	background-color: #507ea4;
	font-weight: bold;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.hero-lang{
	margin-top: 0px;
}

/*=== 9-1-4 矢印が動いてスクロールを促す  ===*/
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置*/
	position:absolute;
	bottom:40%;
	right:50%;
	/*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 2s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	right:-20px;
	bottom:50px;
	width: 38px;
    /*テキストの形状*/
	color: #333;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 2px;
    height: 20px;
    background: #507ea4;
    transform: skewX(-31deg);
}
.scrolldown:after{
	content: "";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:2px;
	height: 50px;
	background: #507ea4;
}
/*=== 9-1-4 矢印が動いてスクロールを促す　ここまで ===*/

/*=====共通の設定=====*/
.m_inner{
	width: 100%;
	text-align: center;/*h2の見出しを中央に寄せるため*/
}

h2{
	text-align: center;
	font-family: 'IM Fell DW Pica', serif;/*<-Google Fonts*/
	display: inline-block;
	padding:5px 10px;
	margin: 20px 10px;
}
p{
	color: #333;
	line-height: 2.0rem;
	padding: 10px;
	text-align: left;
}

/*section artwork,exhibitの設定*/
.unit img{
	width: 70%;
	margin: 0 auto;
	border: solid 0.5px #ccc;
}
.unit p{
	width: 70%;
	margin: 0 auto;
	line-height: 1.0rem;
}

/*== 7-1-46 矢印が右に移動する ==*/
/*矢印が右に移動する*/
.arrow{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
}

/*矢印と下線の形状*/
.arrow::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-2px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 2px;
	background:#507ea4;
    /*アニメーションの指定*/
    transition: all .3s;
}

.arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:2px;
	background:#507ea4;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.arrow:hover::before{
    left:20%;
}
.arrow:hover::after{
    right:-5%;
}
.arrow:hover{
	text-decoration: none;
}
.arrow-area{
	text-align: right;
	height: 50px;
	padding: 10px 10px 20px 10px;
}
/*== 7-1-46 矢印が右に移動する ここまで==*/

/*profileの設定*/
.profile_area{
	margin-bottom: 100px;
}

.photo{
	width: 50%;
	margin: 0 auto 50px;
}
table{
	text-align: left;
	font-size: 0.9rem;
	margin: 0 auto;
}
td{
	padding: 5px 8px;
}
.date{
	width: 70px;
}
.title{
	width: 100px;
}

/*footerの設定*/
footer p{
	text-align: center;
	font-size: 0.8rem;
	margin: 2rem;
}
.footer_logo{
	width: 40%;
	margin: 0 auto;
}

/*波の設定*/
.wave{
	position:relative;
	height:150px;
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

/*=====Galleryページの設定=====*/
#gallery_h1{
	text-align: left;
	font-size: 3rem;
	margin-top: 30px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.g_inner{
	padding: 10px;
}
.gallery{
	columns: 2;/*段組みの数*/
	padding:0 15px;/*ギャラリー左右に余白をつける*/
	margin:0;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
	list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
	border: solid 0.5px #ccc;
}
#exhibit{
	margin: 200px 30px 100px 30px;
}


/*--------------------------------
     768以上のサイズ（TB・PC小）
--------------------------------*/

@media screen and (min-width: 768px) {
	/*g_nav*/
    /*heightをつけることによって、全面覆っていたWrapを小さくする*/
    .toggleWrap {
		position: fixed;
        height: 50px;
		background-color: transparent;/*vegasの背景を見せるため透明にする*/
		}
    .mainNav {
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 2000;
        top: 1px;
        right: 0%;
        left:auto;
        transform: none;
        }
    .mainNav li {
        margin: 0px 0px 0px 10px;
        padding: 5px;
        display: inline-block;
        }
    .navItem{
        font-family: 'IM Fell DW Pica', serif;/*<-Google Fonts*/
		color: #333;
		font-size: 1.0rem;
		padding: 0;
        }
    .animation {
        transition: none;
        }
    /*spで非表示にしていたg_navを表示させる*/
    .hide {
        opacity: 1;
        visibility: visible;
    }
    /*tb/pcでハンバーガーiconを消す*/
    #toggle {
        display: none;
    }
    	
	h1,#gallery_h1{
		font-size: 5rem;
		line-height: 6rem;
	}
	
	/*スライダーの設定*/
	.slider	{
		display: flex;
	}
	/*profileの設定*/
	.photo{
		width: 20%;
	}
	.date,.title{
		width: auto;
	}
	/*footerの設定*/
	.footer_logo{
		width: 20%;
	}
	/*Galleryの写真の表示枚数*/
	.gallery{
		columns:3;
	}
}


/*--------------------------------
     1020以上のサイズ（PC大）
-------------------------------- */

@media screen and (min-width: 1020px) {
	.inner{
		width: 1020px;
		margin: 0 auto;
	}  
	/*グローバルナビの固定*/	
	.toggleWrap{
		width: 1000px;/*innerのpadding左右10pxを考慮して20px小さくする*/
		left: auto;
	}
	/*Galleryの写真の表示枚数*/
	.gallery{
		columns: 4;
	}	
}