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

/* 基本設定 */
html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
header {
	padding: 20px 0px 10px;
}
body {
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(180deg,#fff,#fff,#1c89e3 ,  #174a5b, #000, #174a5b, #ff8000, #e1ffff  );
}
footer {
	padding: 20px 0px;
	width:100%;
	text-align: center;
}

/* 画像に関する設定 */
img {
	width: 100%;
	max-width: 100%;
	height:auto;
	vertical-align: middle;
}

/* ///////////////////////////////////////////////////// */
/* ヘッダー部設定 */
.header-logo{
	width: 100%;
	text-align: center;	
	}

img.h-logo{
	margin-left: auto;
	margin-right: auto;
	width:300px;
	margin: 30px 0px 10px 0px;
}
.h-text p{
	text-align: center;
	font-size: 15px;
	font-weight: 300;
	margin:10px 0px 10px 0px;
}
.h-text h1{
	text-align: center;
	font-size: 26px;
	font-weight: 800;
	margin:10px 0px 10px 0px;
}
.h-text h2{
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	margin:0px 0px 20px 0px;
}


/* ヘッダー部の画像切り替え */
.album {
	margin: auto;
	background-color: black;
	position: relative;
	min-height: 440px;
}
.album img {
	height: 440px;
	object-fit: cover;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 25s;
	-webkit-animation-duration: 25s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}
.album .img1 {
	display: block;
	margin: 0 auto;
}
.album .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 0%;
}
.album .img3 {
	animation-delay:10s;
	-webkit-animation-delay:10s;
	position: absolute;
	top: 0;
	left: 0%;
}
.album .img4 {
	animation-delay:15s;
	-webkit-animation-delay:15s;
	position: absolute;
	top: 0;
	left: 0%;
}
.album .img5 {
	animation-delay:20s;
	-webkit-animation-delay:20s;
	position: absolute;
	top: 0;
	left: 0%;
}

@keyframes album {
	0% {opacity: 1;}
	0.2% {opacity: 1;}
	19.8% {opacity: 1;}
	20% {opacity: 0;}
}
@-webkit-keyframes album {
	0% {opacity: 0;}
	0.2% {opacity: 1;}
	19.8% {opacity: 1;}
	20% {opacity: 0;}
}

/* 地球回転 */
.earth {
    width:100px;
    height:100px;
    background-image: url("image/map.png");
    background-size:cover;
    border-radius:50%;
	border: 5px solid;
	border-color: white;
    position:absolute;
    top:0;
    right:0;
    bottom:130px;
    left:0;
    margin:auto;
    -webkit-animation:rotationEarth 30s infinite linear;
    -moz-animation:rotationEarth 30s infinite linear;
    animation:rotationEarth 30s infinite linear;
}
@-webkit-keyframes rotationEarth {
   from {background-position:left center;}
   to {background-position: -396px center;}
}
@keyframes rotationEarth {
   from {background-position:left center;}
   to {background-position: -396px center;}
}

/* 動輪回転 */
.wheel {
	width:100px;
    height:100px;
    background-image: url("image/wheel.png");
    background-size:cover;
    border-radius:50%;
	border: 5px solid;
	border-color: white;
    position:absolute;
    top:130px;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    -webkit-animation:rotationWheel 20s infinite linear;
    -moz-animation:rotationWheel 20s infinite linear;
    animation:rotationWheel 20s infinite linear;
}
@-webkit-keyframes rotationWheel{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotationWheel{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

/* ///////////////////////////////////////////////////// */
/* 隠すボタン */

.hidden_area {
	border-top: 1px solid #ccc;
	background-size: cover;
	margin-top: 10px;
	margin-bottom: 3px;
	clear: both;
	padding: 15px 0px 10px 0px;
}

/*ボタン装飾*/
.hidden_area label {
    padding: 5px 15px;
	display: block;
	width:200px;
	font-size:18px;
	margin: auto;
	text-align: center;
    font-weight: 400;
    border: solid 1px black;
    cursor :pointer;
}



/*ボタンホバー時*/
.hidden_area label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_area input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_area .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_area input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/* ///////////////////////////////////////////////////// */
/* 上に戻るボタン */

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 50px;
  bottom: 50px;
  background: #bcbcbc;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}






/* indexに戻る */
.backbutton a{
	width:150px;
    height:38px;
	padding-top:5px;
    background-size:cover;
	border: 3px solid;
	border-color: white;
    position:absolute;
    top:330px;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	text-decoration: none;
	font-size:14px;
	font-weight: 800;
	color: #fff;
	transition: 0.4s;
}
.backbutton a:hover{
	background-color: #fff;
	color:#343434;
	
}
/* ///////////////////////////////////////////////////// */
/* 個別ページヘッダー画像 */
.header-image {
	margin: auto;
	position: relative;
	min-height: 440px;
}
.header-image img{
	height: 440px;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}

/* ///////////////////////////////////////////////////// */

/* メイン部設定 */
.full {
	max-width:1100px;
	margin:auto;
}

/* メイン部設定 */
/*タブ切り替え全体のスタイル*/
.tabs {
  background-color: #fff;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  height: 40px;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  color: #888888;
  display: block;
  float: left;
  font-weight: 400;
  transition: all 0.2s ease;
}
.tab_item:hover {
  	opacity: 0.75;
	border-bottom:solid;
	border-color:#aaa;
	border-width:2px;
}
.tab_hidden {
  height: 40px;
  line-height: 50px;
  display: block;
  float: left;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}


/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#gallery:checked ~ #gallery_content,
#works:checked ~ #works_content,
#profile:checked ~ #profile_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  	color: #000;
	border-bottom:solid;
	border-color:#000;
	border-width:2px;
}



/* ///////////////////////////////////////////////////// */
/* タブ内コンテンツの仕様 */
/* gallery欄 */
.map img{
	width:70%;
	margin: 5px 15% 15px;
}
.travelogue {
	border-top: 1px solid #ccc;
	background-size: cover;
	margin-top: 3px;
	margin-bottom: 1px;
	clear: both;
}
.travelogue a{
	width:100px;
	padding: 3px 13px 4px;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
	transition: all 0.2s ease;
}
.travelogue a:hover {
	background: #1B1B1B;
    color: #fff;
	cursor: pointer;
	text-decoration: none;
}


/* ///////////////////////////////////////////////////// */
/* タブ内コンテンツの仕様 */
/* works欄 */
.works {
	border-bottom: 1px solid #ccc;
	background-size: cover;
	text-align: left;
	margin-top: 3px;
	margin-bottom: 1px;
	clear: both;
}
img.roundicon{
	width:20%;
	height: 100%;
	border-radius: 50%;
	float:left;
}
.works p a{
	text-decoration: none;
	font-weight:400;
	color:#888;
	transition: all 0.2s ease;
}
.works p a:hover {
	color:#000;
}
.works p strong{
	font-weight:400;
}
/* ///////////////////////////////////////////////////// */
/* タブ内コンテンツの仕様 */
/* link欄 */
.link {
	background-size: cover;
	text-align: left;
	margin-top: 3px;
	margin-bottom: 1px;
	clear: both;
}
img.linkicon{
	height:100%;
	border-radius: 50%;
	float:left;
}
img.linkicon:hover{
	opacity: 0.5;
    filter: alpha(opacity=50); 
	transition:0.4s;
}
.link p a{
	text-decoration: none;
	font-weight:400;
	color:#888;
	transition: all 0.2s ease;
}
.link p a:hover {
	color:#000;
}
.link p strong{
	font-weight:400;
}

/* ///////////////////////////////////////////////////// */
/* 個別ページの仕様 */
/* gallery欄 */

.gallery img {
	border: 5px solid rgba(0,0,0,0.7);
}
.gallery{
	margin:20px 10% 30px;
}
.gallery p{
	font-weight: 300;
	font-size:14px;
	margin: 10px 5% 30px;
	text-align: justify;
	text-justify: inter-ideograph;
}
.gallery p a{
	text-decoration: none;
	color:#343434;
	font-weight: 800;
	transition: 0.4s;
}
.gallery p a:hover{
	color:#898989;
}
.gallery-single img{
	width:98%;
	margin:0px 1% 15px 1%;
}
.gallery-double img{
	width: calc(96% /2);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-double-mix .tate img{
	width: calc((( 96% - 40px) * (4 / 13) ) + 20px);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-double-mix .yoko img{
	width: calc((( 96% - 40px) * (9 / 13) ) + 20px);
	height: 100%;
	float:left;
	margin:0px 1% 20px 1%;
}
.gallery-triple img{
	width: calc(94% /3);
	height: 100%;
	float:left;
	margin:0px 1% 25px 1%;
}






/* ///////////////////////////////////////////////////// */
/* フッター部設定 */

.footer-text {
	font-size: 11px;
	margin-bottom: 20px;
}


/* ///////////////////////////////////////////////////// */

/* メディア設定 */
/* スマートフォン用 */
@media screen and (max-width : 779px ){
	body{
		max-width:700px;
	}
	
	/*タブのスタイル*/
	.tab_item {
  		width: 120px;
  		margin: 0 1px;
  		font-size: 12px;
	}
	.tab_hidden {
 		width: calc(50% - 183px);
	}
	/* gallery欄 */
	.travelogue {
	text-align: center;
	}
	.travelogue h1{
	font-size: 26px;
	font-weight: 800;
	margin:20px 0px 0px;
	width:100%
}
	.travelogue h2{
	font-size: 14px;
	font-weight: 400;
	margin:10px 0px 0px;
	width:100%
}
	img.squareicon{
	width: calc(88% /3);
	height: 100%;
	float:right;
	margin:25px 2% 10px 2%;
}
	img.square{
	width: 96%;
	height: 100%;
	float:right;
	margin:25px 2% 10px 2%;
}
	/* works欄 */
	img.roundicon{
	margin:10px 15px 10px 0px;
}
	
	.works h1{
	font-size: 18px;
	font-weight: 300;
	margin:20px 0px 0px;
}
	.works h2{
	font-size: 18px;
	font-weight: 800;
	margin:20px 0px 0px;
}
	.works p{
	font-size:12px;
	font-weight: 300;
	margin: 0px 0px 25px;
	overflow: hidden;
}
	/* link欄 */
	img.linkicon{
	width:15%;
	margin:10px 15px 10px 5%;
}
	.link h2{
	font-size: 18px;
	font-weight: 800;
	margin-top: 20px;
	margin-left: calc(20% + 15px);
}
	.link p{
	font-size:12px;
	font-weight: 300;
	margin: 0px 0px 25px;
	overflow: hidden;
}
	.gallery-single-narrow img{
	width:70%;
	margin:0px 15% 15px 15%;
}
}


/* PC用 */
@media screen and (min-width: 780px){
	body{
		max-width:1500px;
	}
	/*タブのスタイル*/
	.tab_item {
  		width: 180px;
  		margin: 0 5px;
  		font-size: 16px;
	}
	.tab_hidden {
 		width: calc(50% - 285px);
	}
	/* gallery欄 */
	.travelogue {
	text-align: left;
	}
	.travelogue h1{
	font-size: 26px;
	font-weight: 800;
	margin:20px 0px 0px;
	float:left;
	width:40%
}
	.travelogue h2{
	font-size: 14px;
	font-weight: 400;
	margin:20px 0px 0px;
	float:left;
	width:40%
}
	img.squareicon{
	width:18%;
	height: 100%;
	float:right;
	margin:25px 0px 25px 2%;
}
	img.square{
	width:50%;
	height: 100%;
	float:right;
	margin:25px 4% 25px 6%;
}
	
	/* works欄 */
	img.roundicon{
	margin:10px 40px 10px 0px;
}
	
	.works h1{
	font-size: 26px;
	font-weight: 300;
	margin:20px 0px 0px;
}
	.works h2{
	font-size: 26px;
	font-weight: 800;
	margin:20px 0px 0px;
}
	.works p{
	font-size:14px;
	font-weight: 300;
	margin: 0px 0px 25px;
	overflow: hidden;
}
	/* link欄 */
	img.linkicon{
	width:10%;
	margin:10px 40px 10px 10%;
}
	.link h2{
	font-size: 26px;
	font-weight: 800;
	margin-top:20px;
	margin-left: calc(20% + 40px);
}
	.link p{
	font-size:14px;
	font-weight: 300;
	margin: 0px 0px 25px;
	overflow: hidden;
}
	.gallery-single-narrow img{
	width:32%;
	margin:0px 34% 15px 34%;
}
}