html{
 scroll-behavior: smooth;
}

body{
 background-color: #ffffe1;
 overflow-x: hidden;
}

button{
 cursor: pointer; /* button要素にマウスを置いた時の形状をpointerに指定 */
}

#header{
 background: linear-gradient(#009900,#006400);
 margin: 0 auto;
 margin-top: -10;
 margin-right: -10;
 margin-left: -10;
 margin-bottom: 0;
 padding: 0;
 width: 110%;
 height: 106;
 border: none;
 overflow: hidden;
}

/* スライドショーの設定開始:参照http://template-party.com/tips/tips20160408_css_slide1.html */
@keyframes slide1 { /* スライドショーの時間設定開始 */
 0% {0px;top: 0px;opacity: 1;}
 15% {0px;top: 0px;opacity: 1;}
 25% {-100%;top: 0px;opacity: 0;}
 90% {-100%;top: 0px;opacity: 0;}
 100% {0px;top: 0px;opacity: 1;}
}
@keyframes slide2 {
 0% {-100%;top: 0px;opacity: 0;}
 15% {-100%;top: 0px;opacity: 0;}
 25% {0px;top: 0px;opacity: 1;}
 40% {0px;top: 0px;opacity: 1;}
 50% {-100%;top: 0px;opacity: 0;}
 100% {-100%;top: 0px;opacity: 0;}
}
@keyframes slide3 {
 0% {-100%;top: 0px;opacity: 0;}
 40% {-100%;top: 0px;opacity: 0;}
 50% {0px;top: 0px;opacity: 1;}
 65% {0px;top: 0px;opacity: 1;}
 75% {-100%;top: 0px;opacity: 0;}
 100% {-100%;top: 0px;opacity: 0;}
}
@keyframes slide4 {
 0% {-100%;top: 0px;opacity: 0;}
 65% {-100%;top: 0px;opacity: 0;}
 75% {0px;top: 0px;opacity: 1;}
 90% {0px;top: 0px;opacity: 1;} 
 100% {-100%;top: 0px;opacity: 0;}  
} /* スライドショーの時間設定終了 */

#slideshow{ /* スライドショーのサイズ設定 */
 margin: 0 auto;
 margin-right: 0;
 margin-left: -25;
 margin-bottom: 0;
 padding-top: 20;
 padding-right: 20;
 width: 108%;
 height: 370px;
 border: none;
 position: relative;
}


.slide1,.slide2,.slide3,.slide4 { /*３枚画像の共通設定*/
 -webkit-animation-duration: 25s; /*実行する時間。「s」は秒の事。*/
 animation-duration: 25s;	  /*同上*/
 -webkit-animation-iteration-count:infinite; /*実行する回数。「infinite」は無限に繰り返す意味。*/
 animation-iteration-count:infinite;	     /*同上*/
}
.slide1 {
 -webkit-animation-name: slide1; /*上で設定しているキーフレーム（keyframes）の名前*/
 animation-name: slide1;	 /*同上*/
 position: absolute;
 top: 0px;
 width: 100%;
 height: 100%;
}
.slide2 {
 -webkit-animation-name: slide2; /*上で設定しているキーフレーム（keyframes）の名前*/
 animation-name: slide2;	 /*同上*/
 position: absolute;
 top: 0px;
 width: 100%;
 height: 100%;
}
.slide3 {
 -webkit-animation-name: slide3; /*上で設定しているキーフレーム（keyframes）の名前*/
 animation-name: slide3;	 /*同上*/
 position: absolute;
 top: 0px;
 width: 100%;
 height: 100%;
}
.slide4 {
 -webkit-animation-name: slide4; /*上で設定しているキーフレーム（keyframes）の名前*/
 animation-name: slide4;	 /*同上*/
 position: absolute;
 top: 0px;
 width: 100%;
 height: 100%;
} /* スライドショーの設定終了 */

.headerpicture{
 margin: 0 auto;
 margin-right: -10;
 margin-left: -10;
 margin-bottom: 0;
 padding-top: 20;
 width: 110%;
 height: 150px;
 border: none;
 position: relative;
}

.shadow{
 margin: 0 auto;
 width: 102%;
 height: 100px;
 margin: 0 auto;
 background-color: #ffffe1;
 border: none;
 position: relative;
 box-shadow: 0px -8px 30px 20px #ffffe1; /* box-shadow: 右へ 下へ 強さ 広がり 色 insetで内側へ; */
}


.whole{ /* スライドショーの右端を合わせるために"whole"divを設定して中央揃え */
 width: 102%;
 height: auto;
 margin: 0 auto;
 padding: 0;
 background-color: #ffffe1;
 box-shadow: 0px 10px 20px 10px #b5b5b5;
 border: none;
}

.middlebox{
 width: 110%;
 height: 400px;
 margin: 0 auto;
 margin-top: -270;
 position: relative;
 padding: 0;
 background: none;
 border: none;
}

.link{
 font-size: 15px;
 font-weight: bolder;
 word-break: break-all;
}
.link:link{
 font-size: 15px;
 font-weight: bolder;
 color: blue;
 text-decoration: underline;
}
.link:hover{
 font-weight: bolder;
 color: red;
 text-decoration: underline;
}
.link:active{
 font-weight: bolder;
 color: yellow;
 text-decoration: none;
}
.link:visited{
 font-weight: bolder;
 color: #800080;
 text-decoration: underline;
}

.toppagetext{
 margin: 0 auto;
 margin-top: 80px;
 width: 80%;
 height: 150;
 text-align: left;
 color: black;
 font-size: 20px;
}

.textbox{
 margin: 0 auto;
 margin-top: 70px;
 width: 90%;
 height: 90%;
 border: none;
}

.texttitle{
 margin: 0 auto;
 margin-top: 80px;
 width: 100%;
 height: auto;
 background-color: #228b22;
 text-align: left;
 border: 3px solid #228b22;
}

.subtexttitle{
 margin: 50 -5 0 2;
 width: 100%;
 height: auto;
 background-color: #1e90ff;
 text-align: left;
 border: 3px solid #1e90ff;
}

.subtexttitleborder{
 margin-: 0;
 width: 0;
 height: 0;
 background-color: none;
 text-align: left;
 border: none;
}

.texttitlelink{
 margin: 0 auto;
 margin-top: 100px;
 width: 100%;
 height: 30;
 background-color: #228b22;
 text-align: left;
 border: 3px solid #228b22;
}
.texttitlelink:hover{
 margin: 0 auto;
 margin-top: 100px;
 width: 100%;
 height: 30;
 background-color: blue;
 text-align: left;
 border: 3px solid blue;
}

.texttitletext{
 margin: 0 auto;
 margin-left: 10;
 padding-left: 10;
 font-size: 20;
 color: #fff;
 font-weight: bold;
 border-left: 4px solid #ffaa00;
}

.text{
 margin: 0 auto;
 margin-top: 20px;
 padding: none;
 width: 90%;
 text-align: left;
 color: black;
 font-size: 17px;
 border: none;
}

.toppagecirclebox{
 margin: 80 0 -110 0;
 padding-left: 5%;
 width: 100%;
 height: 250;
 border: none;
}

.toppagecircle{ /* ボタンデザイン設定:参照http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html */
 width: 20%;
 height: 150;
 margin: 0 auto;
 margin: 10 0 0 5%;
 padding-top: 5%;
 border-radius: 50%;
 border: none;
 background-size: 100% 100%;
 display: inline-block;
 position: relative;
 z-index: 2;
 text-align: center;
 line-height: 1;
 text-decoration: none;
 color: #fff;
 font-size: 20px;
 font-weight: bold;
 overflow: hidden;
}
.toppagecircle::before,
.toppagecircle::after{
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
}
.toppagecircle,
.toppagecircle::before,
.toppagecircle::after{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.toppagecircle:hover {
 color: #fff;
 font-weight: bold;
}
.toppagecircle::after {
 top: -100%;
 width: 100%;
 height: 100%;
}
.toppagecircle:hover::after {
 top: 0;
 background-color: #000033;
} /* ボタンデザインの設定終了 */

.newstitle{
 margin: 0 auto;
 margin-top: 70px;
 width: 70%;
 height: 40;
 background-color: #228b22;
 text-align: left;
 border: 3px solid #228b22;
 border-radius: 10px 10px 0 0
}

.newstitletext{
 margin: 0 auto;
 margin-left: 10;
 font-size: 20;
 color: #fff;
 font-weight: bold; 
}

.news{
 margin: 0 auto;
 margin-top: -10;
 width: 70%;
 height: 180;
 color: black;
 background-color: white;
 border: 3px solid #228b22;
 border-radius: 10px;
}

.newsbox{
 margin: 10 auto;
 width: 90%;
 height: 80%;
 text-align: left;
 border: none;
 overflow-y: scroll; /* スクロールを縦に表示 */
}

.dotted{
 border: none;
 border-top: 2px dotted #424242;
}


#cityframe{
 overflow-x: scroll;
 overflow-y: hidden;
 width: 95%;
 height: 1250;
 margin: 0 0 0 20;
 background-color: #ffffe1;
 box-shadow: 0;
 border: none;
 transform: rotateX(180deg); /* 回転した結果，要素まで回転されるのでさらに回転して表示 */
}

#citybox{
 display: block; /* iframeはブロックレベル要素ではないので、margin: 0 auto;だけではセンタリングができないため */
 width: 860;
 height: 100%;
 transform: rotateX(180deg); /* 回転した結果，要素まで回転されるのでさらに回転して表示 */
}

.linkbox{
 position: absolute;
 display: block; /* iframeはブロックレベル要素ではないので、margin: 0 auto;だけではセンタリングができないため */
 width: 100%;
 height: 350px;
 margin: 0 auto;
 margin-top: -200;
 padding: 0;
 background-color: #ffffe1;
 box-shadow: 0px 30px 20px 10px #b5b5b5;
 border: none;
}

.returnbutton{
 position: fixed;
 bottom: 10px;
 right: 20px;
 width: 150px;
 height: 100px;
 z-index: 400;
 background: url('../../images/return1.gif');
 background-size: 100% auto;
 font-color: white;
}
.returnbutton:hover{
 position: fixed;
 bottom: 10px;
 right: 20px;
 width: 150px;
 height: 100px;
 z-index: 200;
 background: url('../../images/return2.gif');
 background-size: 100% auto;
 font-color: white;
}

#swipe{
 position: relative;
 width: 100%;
 height: 30;
 margin: 0 0 10 10;
 background: url('../../images/kakusityousonn-images/swipe.gif');
 background-size: 40% auto;
 background-repeat: no-repeat;
 background-color: none;
 border: none;
}

.footer{
 position: relative;
 margin-top: 110;
 margin-right: -10;
 margin-left: -10;
 margin-bottom: -20;
 padding: 0;
 width: 110%;
 height: 350px;
 border: none;
}