@charset "UTF-8";
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {

    color: #666;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

body {
}

::selection {
    background: #CE9FFF;
}

ul,ol {
	list-style: none;
}

/*--Text------------------------------------------------------------*/
@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}

@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}

@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/*ヘッダー
-------------------------------------*/

#open,#close  {
    display: block;
    width: 70px;
    border: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99;
}

#navi {
    display: block !important;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: .5s;
    z-index: 999;
}

@media screen and (max-width: 669px){
#open,#close  {
    display: block;
    width: 40px;
    border: none;
    position: absolute;
    top: 20px;
    right: 20px;
}
}

/*フルスクリーンメニュー
-------------------------------------*/
/*gnav*/
.gnav{
    	background: rgba(255,255,255,0.9);
    	display: none;
   	height: 100%;
    	position: fixed;
	left: 0;
	top: 0;
    	width: 100%;
    	z-index: 98;
    	overflow-y: auto; 
    	-webkit-overflow-scrolling: touch;   // 慣性スクロールを追加
}
.gnav__wrap{
    	align-items:top;
    	display: flex;
    	height: 100%;
    	justify-content: center;
    	position: absolute;
    	width: 100%;
	}
.gnav__menu__item{
    	margin: 50px 0;
    	text-align: center;
	}
.gnav__menu__item a{
    	color: #000;
    	font-size: 1.5rem;
    	letter-spacing: 0.1rem;
    	padding: 10px 20px 20px 20px;
    	text-decoration: none;
    	transition: .2s;
	}
	
.gnav__menu__item a:hover{
    	color: #D9D6D4;
	}

.gnav__menu{
	margin: 150px 0 50px 0;
	}



@media screen and (max-width: 768px){
	.gnav__menu__item a{
    	font-size: 1em;
	}
	
    	#open,#close  {
    	width: 50px;
	position: absolute;
    	top: 10px;
    	right: 10px;
	}	
}

@media screen and (max-width: 669px){
	#open,#close  {
    	width: 40px;
	}
	.gnav__menu__item a{
    	font-size: 0.8em;
	border-bottom: 1px solid #000;
	padding: 5px 20px 10px 20px;
	}
	.menu_title{
	margin: 50px 0 30px 0;
	width:77px;
	}
}
    
/*メイン画像
-------------------------------------*/

.full {
  	position: relative;
  	width: 100%;
  	min-height: 100vh;
  	background: url(../images/DSC00028_2.jpg)
	center / cover;
    	background-repeat: no-repeat;
}
.full_kaorigusa  {
  	position: relative;
  	width: 100%;
  	min-height: 100vh;
  	background: url(../images/DSC03301.JPG)
	center / cover;
    	background-repeat: no-repeat;
}

.logo_kaorigusa{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 50%;
    left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 95;
	width: 300px;
}
/*メインコンテンツ
-------------------------------------*/
main {
	background-image: url(../images/tumugi.png);
	background-color: #F5F4F3;
	background-repeat: repeat,repeat;
	padding-bottom: 100px;
}

.inner_contents{
	max-width: 1000px;
    	margin: 0 auto;
	}
	
	
/*ふわっと表示
-------------------------------------*/
.fade{
  opacity: 0;         /* 初期値は透明にしておく */
  transition: .5s;    /* 動くスピードを0.5秒に指定 */
  position: relative; /* 相対位置の設定 */
  top: 30px;          /* 事前に下に50pxずらしておく */
}
 
.active {
  opacity: 1;         /* 透明度を元に戻す */
  top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}

/*コンテンツ
-------------------------------------*/
h2 {
    color: #fff;
    font-size: 2.5rem;
    padding-bottom: 8rem;
    letter-spacing: 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
}

h2 > span {
  background: linear-gradient(transparent 0%, #000 0%);
  padding: 5px 10px;   
  }

.year0{
	position: absolute;
	top:130px;
	left:0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
    	letter-spacing: 0.1rem;
	writing-mode: vertical-rl;
    	-ms-writing-mode: tb-rl;
    	-webkit-writing-mode:vertical-rl;
    	}

.year0 > span {
  	background: linear-gradient(transparent 0%, #CE9FFF 0%);
  	padding: 10px 5px 10px 8px;   
  	}
  
h3 {
    color: #000;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    text-align: left;
}
  
p {
    letter-spacing: 0.2rem;
    line-height: 2.5;
    font-size: 1.8rem;
    color: #fff;

}

@media screen and (max-width: 669px){
.inner_contents{
    padding: 0 15px;
}

h2 {
    color: #fff;
    font-size: 1.8rem;
    padding-bottom: 5rem;
    padding-right: 5rem;
    letter-spacing: 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
}
  
p {
    letter-spacing: 0.2rem;
    line-height: 2;
    font-size: 1.3rem;
    color: #fff;
}
main {
	padding-bottom: 30px;
	}
.year0{
	position: absolute;
	top:160px;
	left:0;
	color: #fff;
	font-size: 0.7rem;
	line-height: 1.2;
    	letter-spacing: 0.1rem;
	writing-mode: vertical-rl;
    	-ms-writing-mode: tb-rl;
    	-webkit-writing-mode:vertical-rl;
    	}
}

/*アーカイブスページ
-------------------------------------*/


.item_container_page{
	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	position: relative; 

	}

.item_page{
  	box-sizing:border-box;
  	width:100%;
   	margin-bottom:10px;
}

.text_archives_page{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	position: relative;
 	width: 75%;
 	margin:0 auto;
}

.logo_kao {
  display: flex;
  justify-content: center;
}
.logo_kao2 {
  display: flex;
  justify-content: center;
}

.logo_kao img {
    width:180px;
    text-align: center;
    margin-top:100px;
    margin-bottom:30px;
}
.logo_kao2 img {
    width:350px;
    text-align: center;
    margin-top:100px;
    margin-bottom:50px;
}
.text_archives_toptitle
{
    width:100%;
    color: #000;
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin-top:50px;
    margin-bottom:30px;
    line-height: 2;
    }
    
.text_archives_title{
    width:100%;
    color: #000;
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    text-align: left;
    margin-top:100px;
    margin-bottom:50px;
    line-height: 1;
    font-style: italic;
}

.text_archives_title2{
    width:100%;
    color: #000;
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin-top:100px;
    margin-bottom:50px;
    line-height: 1;
    font-style: italic;
    }
    
  .text_archives_photo{
    width:100%;
    color: #000;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    text-align: left;
    margin-top:10px;
    margin-bottom:10px;
    }

.text_archives_des{
 　　width:100%;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    text-align: left;
    line-height: 1.8;
    margin-bottom:30px;
}

.text_archives_des2{
 　　width:100%;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    text-align: center;
    line-height: 1.8;
    margin-bottom:50px;
    }
    
.text_archives_des > span  {
    position: relative;
    display: inline-block;
    background: linear-gradient(transparent 0%, #fff 0%);
    padding: 2px;
}

.caption{
width:100%;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    text-align: left;
    line-height: 1.8;
    margin-bottom:30px;
    }

.caption a > span  {
    	color: #fff;
 	background: linear-gradient(transparent 0%, #000 0%); 
 	padding: 0 10px;
 	line-height: 1.5;
    }
 
 .caption a:hover > span  {
    	color: #000;
	background: linear-gradient(transparent 0%, #00FF00 0%);
 	padding: 0 10px;   
    }
    
    
/* 幅650px以下の表示
-------------------------------------*/
@media screen and (max-width: 669px){
.inner_contents{
    padding: 0;
}
   
    .item_page{
    padding:0;
    width:100%;
    }
.text_archives_page{
    padding:0;
    width: 100%;
    }

.text_archives_toptitle{
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    }
.text_archives_toptitle img{
    width: 100px;
        margin-bottom:-20px;
	}
.logo_kao img{
		width: 100px;
		margin-top:50px;
        margin-bottom:-20px;
	}
.logo_kao2 img{
    width: 250px;
	}

.text_archives_des{
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    line-height: 1.7;
    width: 85%;
    }
.text_archives_title{
    width:100%;
    color: #000;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-align: left;
    margin-top:50px;
    margin-bottom:25px;
     line-height: 1.5;
     width: 85%;
    }
.item_container_page{
  	margin-bottom: 30px;
	}
.caption{
    	font-size: 0.8rem;
    	letter-spacing: 0.05rem;
	width: 85%;
	}
.logo_kaorigusa{
	width: 200px;
}
}
/*THANKSページ
-------------------------------------*/
.contents_thanks {
    background-size: cover;
    background-position: center center; 
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*フッター
-------------------------------------*/

#footer h2{
    margin: 20px 0 30px 0;
    padding-bottom: 0;
    font-size: 0;
    }

#footer .nest_p{
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 200%;
    font-size: 90%;
     margin: 0 0 40px 0;
    }

#footer .nest_p_footer{
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 200%;
    font-size: 80%;
     margin: 0 0 5px 0;
    }

#footer .copyright{
    color: #fff;
    letter-spacing: 0.1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 80%;
}

#footer {
	background: #575957;
	padding: 30px;
}


#footer footer {
	margin: 0 auto;
	height: auto;/*サンプル用に高さ設定してあります。*/
	text-align: center;
}

span {
    display: inline-block;
}


/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 0;
    right: 15px;
}
#pagetop a {
    display: block;
    width: 80px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {

}

/* 幅650px以下の表示
-------------------------------------*/
@media screen and (max-width: 669px){

#footer h2{
     padding:0;
    }
#footer h2 img{
	width:110px;
	}
  
#footer .nest_p{
    font-size: 0.8rem;
     margin: 0 0 20px 0;
    }
#footer .nest_p_footer{
    line-height: 1.5;
    font-size: 0.6rem;;
    }

#footer .copyright{
    line-height: 2;
    font-size: 0.5rem;;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop a {
    display: block;
    width: 40px;
    padding: 10px 0;
    text-align: center;
    margin: 0 -10px 0 0;
}
}


/*フォーム
-------------------------------------*/

.contact_title{ 
	width:100%;
	text-align: center;
	margin-top:50px;
	padding-bottom: 2rem;
}


form { 
	width:100%;
	margin: 0;
	text-align: center;
	margin-bottom:100px;
	  }

input {
	width:100%;
  color:#000;
  font-size: 18px;
  line-height: 22px;
  border:2px solid #000;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  display: inline-block;
  vertical-align: top;
  height: 60px;
}

input[type=text]:focus,.feedback-input:focus { border:2px solid #00FF00;}

textarea {
	width:100%;
  height: 150px;
	line-height: 150%;
	border:2px solid #000;
	  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  display: inline-block;
  vertical-align: top;
}

input[type="submit"]  { 
	background:#000;
	border:2px solid #000;
	color: #fff;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	  width:20%;
	}

input[type="submit"] :hover { background:#00FF00; }

.feedback-input::placeholder {
	color: #000;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
 	font-style: italic;
}


.pc_view{
  display: block;
}

.sp_view{
  display: none;
}

.moji_big{
	font-size: 18px;
	font-weight:bold;
}

.kaorigusa_logo{
	margin:  50px 0 -30px 0;
}

@media screen and (max-width: 669px){
    .pc_view{
      display: none;
    }
	form { 
	padding: 0 35px;
	text-align: center;
	margin-bottom:100px;
	  }
    .sp_view{
      display: block;
	}
	.text_archives_title2{
	width:85%;
    text-align: left;
    }
	.text_archives_des2{
		 width:85%;
    text-align: left;
	}
	.contact_title,.contact_p{ 
		text-align: left;
		padding: 0 35px;
	}
		.contact_title{ 
		margin-bottom:30px;
	}
input[type="submit"]  { 
	width:100%;
	}

}