/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　共通設定
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

:root {

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　カラー設定
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

--black: #000;
--white: #fff;

--mainColor-001: #281e1c;
--mainColor-002: #6dacb1;
--mainColor-003: #4a3f2f;
--mainColor-004: #d8a881;



/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　大きさ設定
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

--PC_width: 1200px;
--MB_width: 600px;

--PC_header_height: 125px;
--MB_header_height: 80px;
--footer_height: 90px;


}

* {
padding: 0px ; 
margin: 0;
}

html {
height: 100%;
width: 100%;
}

body {
width: 100%;
-webkit-text-size-adjust: 100%;
}

.hide {
display: none;
}

/* ▼-----リンク色の変更-----▼ */
a:link{
  color: var( --green ); /* 未訪問のリンク色 */
  text-decoration: none; /* アンダーラインなし */
}
a:visited{
  color: var( --green ); /* 訪問済みのリンク色 */
  text-decoration: none; /* アンダーラインなし */
}
a:hover{
  color: var( --lblue );  /* カーソルが乗った時の色 */
  text-decoration: underline; /* アンダーラインあり */
}

/* ▲-----リンク色の変更-----▲ */

@font-face {
    font-family: 'Itim';
    src: url("../file/Itim-Regular.woff")  format('woff');
}



/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
ハンバーガーメニュー- header
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/


div#HM-list {
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 20;
width: 100%;
}

div#HM-list hr{
margin: 50px 0;
}

div#HM-list input{
color: var( --white );
font-size: 30px;
font-family: 'Itim', cursive;
margin: 0 30px;
background-color: transparent;
border-color: transparent;
outline: none;
padding-right: 700px;
}

div#HM-list p img{
margin: 14px 12px 0;
}

div#HM-list p.top{
height: 50px;
text-align: right;
}


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
トップロゴ・ボタン
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

header {
position: sticky;
top: 0;
z-index: 10;
height: var( --PC_header_height );
background: var( --white );

display: grid;
grid-template-columns: auto auto;
}


header article {
margin: 20px auto auto 70px;
}

header section {
margin: 50px 100px auto auto;
font-size: 15px;
}

/* ハンバーガーメニューボタン  */
header .HM-open {
position: absolute;
right: 20px;
bottom: 30px;
display: none;
}


header .insta {
position: absolute;
right: 25px;
bottom: 40px;
width: 50px;
}


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

@media only screen and (max-width: 979px) {

header {
display: grid;
grid-template-columns: auto;
}

header article {
margin: 23px auto auto 50px;
}

/* ハンバーガーメニューボタン  */
header .HM-open {
display: block;
}

header section {
display: none;
}

header .insta {
right: 100px;
}



}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
トップイメージ　-　ボタン
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/



input[type="submit"] {
padding: 10px 0;
text-decoration: none;
color: var( --white );
font-family: 'Itim', cursive;
transition: .4s;
font-size: 17px;
outline: none;
background: var( --black );
border: none;
border-radius: 30px;
padding: 10px 40px;

}



input[type="submit"]:hover {
color: var( --white );
background: var( --mainColor-002 );
cursor: pointer;
}

input[type="submit"]:disabled {
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

@media only screen and (max-width: 979px) {

div#topbtn {
display: none;
width: 700px;
}


}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
見出し
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/

h3 {
width: 1000px;
text-align: left;
margin: auto;
background-image:url(../img/midashi.svg);
height: 75px;
padding: 40px 0 0 100px;
font-family: 'Itim', 'fantasy';
font-size: 25px;
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

@media only screen and (max-width: 979px) {

h3 {
width: 500px;
}

form.center {
text-align: center;
margin: auto;
}


}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
カレンダー　※yoyaku.phpでもいじってるの注意
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/

#carender {
border-color: #d1d1d1;
border-style: solid;
border-width: 1px 0 0 1px;
box-sizing: border-box;
}

#carenderMB {
border-color: #d1d1d1;
border-style: solid;
border-width: 1px 0 0 1px;
box-sizing: border-box;
margin: auto;
}

#carender section {
position: sticky;
text-align: center;
padding: 20px;
left: 0px;
color: #fff;
background: #000;
text-align: center;
padding: 20px;
}

#carenderMB section {
text-align: center;
padding: 20px;
left: 0px;
color: #fff;
background: #000;
text-align: center;
padding: 20px;
}

#main #carender article {
width: 100px;
text-align: center;
padding-top: 20px;
}

#main #carenderMB article {
width: 190px;
text-align: center;
height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main #carender article#btn {
padding-top: 12px;
}

#carender section, #main #carender article, #carenderMB section, #main #carenderMB article  {
border-color: #d1d1d1;
border-style: solid;
border-width: 0 1px 1px 0;
box-sizing: border-box;
}

div#carender {
position: relative;
margin-top: 50px;
width: 1101px;
overflow: hidden;
margin: auto;
}

div#view {
text-align: center;
}


#main article.sat {
color: #7c9eea;
}

#main article.sun {
color: #e67e7e;
}


button.month {
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 15px;
outline: none;
background: var( --black );
border: none;
border-radius: 20px;
padding: 0px 20px;
height: 40px;
}



button.month-move {
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 15px;
outline: none;
background: var( --black );
border: none;
border-radius: 20px;
width: 40px;
height: 40px;
}

button.month:hover, button.month-move:hover, button.left:hover, button.right:hover  {
color: var( --white );
background: var( --mainColor-002 );
cursor: pointer;
}


button.month:disabled {
}



button.left, button.right {
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 25px;
outline: none;
background: var( --black );
border: none;
border-radius: 30px;
width: 60px;
height: 60px;
margin: 0 100px;
}

button.left:disabled, button.right:disabled {
color: #b4b4b4;
background: #c7c7c7;
cursor: auto;
}


button.adbtn {
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 15px;
outline: none;
background: var( --mainColor-002 );
border: none;
border-radius: 20px;
padding: 0px 20px;
height: 40px;
}

button.adbtn:hover  {
color: var( --white );
background: #94c8cc;
cursor: pointer;
}

#mailInfo input {
padding: 7px 10px;
margin: 12px 0;
width: 300px;
}

#mailInfo button {
margin-bottom: 15px;
}




















































/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
メインエリア
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/

#main {
width: 100%;
min-height: calc(100vh - var( --PC_header_height ) - var( --footer_height ));
//background: #917760;

display: grid;
grid-template-rows: auto 1fr;
}

div#topImage {
position: relative;
background: var( --white );
background-image: url(../img/mainLogo.svg), url(../img/mainImage.jpg);

background-repeat: no-repeat;
background-position:left 40px bottom 40px, center center;/* 画像の表示位置を指定  */
background-size:258px, 100%;
height: 550px;
}


div#subImage {
position: relative;
background: var( --black );
color: var( --white );
text-align: center;

font-family: 'Itim', cursive;
font-size: 25px;

margin: 20px 0 50px 0;
padding: 30px 0;

}



#main article {
width: 1200px;
margin: 0 auto;
background: var( --white );
}


#main article section.way2 {
width: 1100px;
display: grid;
grid-template-columns: 450px 600px;
grid-template-rows: 310px;
margin-left: 50px;
}

.way2 img {
margin: 25px 50px;
}

.way2 div.photo {
background-image: url(../img/photoFrame.jpg);
background-position: left 40px top 0px;
background-repeat: no-repeat;
margin: auto;
}

#main article section.way4 {
width: 1080px;
display: grid;
grid-template-columns: 270px 270px 270px 270px;
grid-template-rows: 240px 60px 100px;
margin: 20px auto auto auto;
font-size: 13px;
}

#main article section.way4 p {
font-size: 13px;
margin: 0;
}

.way4 form {
grid-row: 3;
grid-column: 1 / 5;
}




#main article section p {
margin: 45px 20px 0 0;
font-size: 16px;
line-height: 30px;
}

#main article.w100 {
width: 100%;
text-align: center;
margin: auto;


background: #ebeff4;
}



div#carender section {
font-size: 11px;
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
地図
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/

iframe {
width: 900px;
height: 450px;
margin: 10px 150px 20px 150px;
}

.mapText {
width: 880px;
margin: auto;
margin-bottom: 50px;
font-size: 16px;
line-height: 40px;
}

.mapTextMB {
display: none;
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

@media only screen and (max-width: 979px) {

div#carender {
width: 600px;
overflow-x: scroll;
}



#main {
min-height: calc(100vh - var( --MB_header_height ) - var( --footer_height ));
}

div#topImage {
width: 600px;
height: 400px;
background-image: url(../img/mainImage.jpg);
background-size: 131%;
background-position: center center;/* 画像の表示位置を指定  */
margin: auto;
}

div#topImage section {
top: 50px;
text-align: center;
width: 100%;
}

div#topImage h1 {
font-size: 40px;
margin-bottom: 15px;
}

div#topImage p {
font-size: 25px;
}

#main article {
width: var( --MB_width );
}

iframe {
width: 600px;
height: 400px;
margin: 10px 0 20px 0;
}

.mapText {
display: none;
}

.mapTextMB {
padding: 0 25px;
font-size: 17px;
line-height: 40px;
display: block;
}

#main article section.way2 {
width: 600px;
display: grid;
grid-template-columns: 600px;
grid-template-rows: 310px 350px;
margin-left: 0;
}

#main article section.way4 {
width: 540;
display: grid;
grid-template-columns: 270px 270px;
grid-template-rows: 240px 60px 240px 60px 100px;
margin: 40px auto auto auto auto;

}

#main article section.way4 p {
font-size: 16px;
margin: 0;
}

.way4 form {
grid-row: 5;
grid-column: 1 / 3;
}

.way4 p.dan2-1 {
grid-row: 2;
grid-column: 1;
}

.way4 p.dan2-2 {
grid-row: 2;
grid-column: 2;
}

.mapText {
width: 600px;
}

#main article section p.text2 {
width: 530px;
font-size: 20px;
line-height: 40px;
margin: 10px auto auto auto;
}

#main article section p {
margin: 10px auto auto auto;
}


button.adbtn {
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 15px;
outline: none;
background: var( --mainColor-002 );
border: none;
border-radius: 20px;
padding: 0px 15px;
height: 40px;
}


}







/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
footer
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/

footer {
position:relative;
background: var( --black );
width: 100%;
height: var( --footer_height );
}

footer section {
text-align: center;
color: var( --white );
padding: 8px;
font-size: 14px;
}





/* コピーライト */
footer div {
margin: 0 auto;
background: var( --black );
color: var( --white );
width: 100%;
text-align: center;
padding: 15px 0;
margin-top: 25px;
position: absolute;
bottom: 0;
}



/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

@media only screen and (max-width: 979px) {

footer section {
width: 580px;
}

footer form {
font-size: 17px;
}


}