@charset "UTF-8";

/* ////// google fonts ////// */

@import url('https://fonts.googleapis.com/css?family=Comfortaa:700|Quicksand');


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


html{
text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font-family:'Ishii Gothic R','メイリオ','Verdana','osaka','Chicago','ＭＳ Ｐゴシック','sans-serif';
line-height:1.5em;
}




body{
 background-color:#f1f6e2;
}


/* ////// 右寄せ固定閉じるボタン ////// */
.close-btn{
  width:100px;
  height:100px;
  position:fixed;
  top:30px;
  right:0%;
}


/* ////// 左矢印 ////// */
.arrow_back{
  width:100px;
  height:100px;
  position:fixed;
  top:90%;
  left:10%;
}

/* ////// 右矢印 ////// */
.arrow_forward{
  width:100px;
  height:100px;
  position:fixed;
  top:90%;
  right:0%;
}



/* ////// menu web ////// */

#menu{
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
  text-align:left;
}


nav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 90%;
text-align: center;
}

nav li{
display: table-cell;
min-width: 70px;
}

nav a{
display: block;
width: 100%;
text-decoration: none;
font-size: 11pt;
font-family: 'Ishii Gothic R';
color: #54432f;
padding-bottom: 5px;
}

nav li.current{
border-bottom: 3px solid #48a563;
}

nav li:hover{
color: #b4a894;
border-bottom: 3px solid #b4a894;
}






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




h1{
  font-size: 20pt;
  font-family: 'Ishii Gothic R';
  margin: 0;
  color: #48a563;
}


h2{
  font-size: 20pt;
  font-family: 'Ishii Gothic R';
  line-height: 1.5em;
  color: #54432f;
}

h3{
  font-size: 15pt;
  font-family: 'Ishii Gothic R';
  line-height: 1.5em;
  margin: 5px 0px 10px 0px; /* 上右下左 */
  color: #000000;
}


#p{
  text-decoration: none;
}

.indent1 {
	text-indent: -6em;
	padding-left: 6em; /* 2行目以降6字下げ */
	margin: 1em 0px;   /* 上下に1em・左右に0px */
}

h4{
  display: inline-block;
  text-decoration: none;
  background: #f1f6e2;
  color: #48a563;
  font-size: 10pt;
  font-family: 'Ishii Gothic R';
  margin: 5px 0px 5px 0px;
  padding: 5px 15px 5px 15px; 
  border: solid 1.5px #48a563;
  text-align: center;
  border-radius: 20px;
}

h5{
  font-size: 10pt;
  font-family: 'Ishii Gothic R';
  margin: 0px 0px 5px 0px; /* 上右下左 */
  color: #48a563;
}

h6{
  display: inline-block;
  text-decoration: none;
  background: #f6f7f2;
  color: #b4a894;
  font-size: 10pt;
  font-family: 'Ishii Gothic R';
  margin: 5px 0px 10px 0px; /* 上右下左 */
  padding: 2px 10px 2px 10px; /* 上右下左 */
  border: solid 1.5px #b4a894;
  text-align: center;
  border-radius: 20px;
}

h7 {
        margin: 10px 10px 40px 0px;
        font-family: 'Ishii Gothic R';
        padding:  0;
        line-height: 2em;
        font-size:9pt;
        color: #1a8539;
}



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

#a{
  text-decoration: none;
}


.btn {
  text-decoration: underline;
  text-decoration-color: #b4a894;
  text-underline-offset: 5px;
  color: #8c8374;
  font-size: 12pt;
  font-family: 'Ishii Gothic R';
  line-height: 1.5em;
  padding: 1px
}




.btn2-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn2 {
  display: inline-block;
  text-decoration: none;
  background: #fff;
  color: #48a563;
  font-size: 11pt;
  font-family: 'Ishii Gothic R';
  line-height: 20px;
  padding: 5px 15px 5px 15px; /* 上右下左 */
  border: solid 1.5px #48a563;
  text-align: center;
  cursor: pointer;
  border-radius: 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn2:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}






.btn3-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn3 {
  display: inline-block;
  text-decoration: none;
  background: #f6f7f2;
  color: #48a563;
  font-size: 15pt;
  font-family: 'Ishii Gothic R';
  padding: 15px 0px 15px 0px; /* 上右下左 */
  border: solid 1.5px #48a563;
  text-align: center;
  cursor: pointer;
  border-radius: 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn3:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}




.btn4-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn4 {
  display: inline-block;
  text-decoration: none;
  background: #f6f7f2;
  color: #54432f;
  font-family: 'Ishii Gothic R';
  line-height: 1.5em;
  padding: 20px 15px 5px 15px; /* 上右下左 */
  border: solid 1.5px #48a563;
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn4:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}



.btn5-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn5 {
  display: inline-block;
  text-decoration: none;
  background: #f1f6e2;
  color: #8c8374;
  font-size: 11pt;
  font-family: 'Ishii Gothic R';
  line-height: 20px;
  margin: 8px 0px 8px 0px; /* 上右下左 */
  padding: 5px 15px 5px 15px; /* 上右下左 */
  border: solid 1.5px #8c8374;
  text-align: center;
  cursor: pointer;
  border-radius: 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn5:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}


.btn5now-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn5now {
  display: inline-block;
  text-decoration: none;
  background: #f1f6e2;
  color: #48a563;
  font-size: 11pt;
  font-family: 'Ishii Gothic R';
  line-height: 20px;
  margin: 8px 0px 8px 0px; /* 上右下左 */
  padding: 5px 15px 5px 15px; /* 上右下左 */
  border: solid 1.5px #48a563;
  text-align: center;
  cursor: pointer;
  border-radius: 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn5now:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}



.btn7-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.btn7 {
  display: block;
  text-decoration: none;
  width: 150px;
  background: #48a563;
  color: #fff;
  font-size: 12pt;
  font-family: 'Ishii Gothic R';
  line-height: 20px;
  margin:  0 auto;  
  padding: 20px 15px 20px 15px; /* 上右下左 */
  border: solid 1.5px #48a563;
  text-align: center;
  cursor: pointer;
  border-radius: 40px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn7:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}




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

#breadcrumb{
        margin: 10px 10px 40px 0px;
        font-family: 'Ishii Gothic R';
        padding:  0;
        line-height: 2em;
        font-size:8pt;
        color: #54432f;
}


.btn6 {
  text-decoration: none;
  text-decoration-color: #b4a894;
  text-underline-offset: 5px;
  color: #8c8374;
  font-size: 8pt;
  font-family: 'Ishii Gothic R';
  line-height: 1.5em;
  padding: 1px
}


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


#top{
  width: 100%;
  margin:  0 auto;
  max-width: 600px;
  text-align:left;
  line-height: 1.5em;
}

.top_text {
        margin: 10px 10px 40px 0px;
        font-family: 'Ishii Gothic R';
        padding:  0;
        line-height: 2em;
        font-size:10pt;
        color: #54432f;
}






.top_foot {
        width: 100%;
	text-align: center;
        line-height: 1.5em;
        margin: 0px 0px 40px 0px;
	padding: 0px 0px 5px 0px;
        border-bottom: 1.5pt dotted #48a563;
}



.top_credit {
        font-size:8pt;
        color: #48a563;
        margin: 40px 0px 80px 0px;
}






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


#nikki{
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
  text-align:left;
}



.nikki_text {
        margin: 0px 0px 120px 8px;
        padding: 0px;
        font-size: 10pt;
        font-family: 'Ishii Gothic R';
        line-height: 1.8em;
        color: #54432f;
}


.nikki_foot {
        width: 100%;
	text-align: left;
        line-height: 1.5em;
        margin: 40px 0px 40px 0px;
	padding: 0px 0px 5px 0px;
        border-bottom: 1.5pt dotted #48a563;
}





.works_text {
        margin: 0px 0px 10px 8px;
        padding: 0px;
        font-size: 9pt;
        line-height: 1.8em;
        color: #54432f;
}





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



.readmore {
  position: relative;
  margin: 50px auto 0;
  padding: 0 0 75px;
}

.readmore label {
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0;
  margin: 0 auto;
  width: 200px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  background-color: #48a563;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
}

.readmore label::before{
  content: '続きを読む';
}

.readmore input[type="checkbox"]:checked ~ label::before {
  content: 'もとに戻す';
}

.readmore input[type="checkbox"]{
  display: none;
}

.readmore-content {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.readmore input[type="checkbox"]:checked ~ .readmore-content {
  height: auto;
}

.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: linear-gradient( rgba(241,246,226,0) 0%, rgba(241,246,226,0.8) 50%, #f1f6e2 100%);
}

.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
  display: none;
}






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


.slideshow {
	position: relative;
	overflow: hidden;
}

/* ////// slideContents ////// */

.slideContents {
	position: relative;
	background: #f1f6e2;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}
.slideContents section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.slideContents section img {
	max-width: 100%;
	padding: 0;
	box-sizing: border-box;
	vertical-align: middle;
}

/* ////// mechanism  ////// */

.slideContents #slide1 {
	position: relative;
}
.slideContents section {
	animation: autoplay 40s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes autoplay {
	0%, 16%, 100% { transform: none; }
	20% { transform: translateX(-100%); }
	20.001%, 96% { transform: translateX(100%); }
}
.slideContents #slide1 { animation-delay: 0s; }
.slideContents #slide2 { animation-delay: -32s; }
.slideContents #slide3 { animation-delay: -24s; }
.slideContents #slide4 { animation-delay: -16s; }
.slideContents #slide5 { animation-delay: -8s; }



/* ////// Masonry  ////// */

#wrapper {
  position: relative;
  max-width: 1040px;
  margin: 5px auto;   /*全体の中央寄せ*/
}
#container {
  width: 100%;
  margin: 5px auto;   /*中央寄せ*/
  position: relative;
}
.grid_item {
  margin: 5px;
  width: 320px;
  padding: 5px;
}
.grid_item.x2 {
  width: 680px;
}
.grid_item.x3 {
  width: 1040px;
}
.grid_item img {
  width: 100%;
}



/* ////// luminous  ////// */

@media screen and (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 160vw !important;  /* 軽くスワイプで左端から右端まで動かせる量 */
    max-height: 100vh !important;  /* 上下に適度に余白 */
    font-size: 10pt;
    font-family: 'Ishii Gothic R';
    line-height: 1.8em;
  }
}