*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Noto Sans JP";
    background-color: #f0f0f0;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: #c91e1e;
}

.main-title,.sub-title {
	color: #ffffff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
}

.page-nav ul {
    list-style: none;
}
.page-foot p {
        color: #ededed;
}
strong{
    color:#c91e1e;
}


.page-contents ul{
    padding-left: 2em;
}

article ol{
    margin-left: 20px;
}
article li{
	padding-left: 0.5em;
}
.mt10{
        margin-top: 10px;
    }
.adjust{
    width: 100%;
    height: auto;
}
.tel_no::before{
  content: '';
  display: inline-block;
  width: 30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(image/gif/ico_tel.gif);
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -10px;
}
.smart_mail::before{
  content: '';
  display: inline-block;
  width: 30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(image/gif/ico_smart.gif);
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
margin-top: -10px;  
}
.pc_mail::before{
  content: '';
  display: inline-block;
  width: 30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(image/gif/ico_mail.gif);
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -10px;
}
.caution_box {
	background-color: #6F001C;
    padding: 10px 10px 0px 10px;
    border: solid thin #6F001C;
    border-radius: 4px;
}
.caution_box h2{
	text-align: center;
    color: #fff;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: dashed thin #cccccc;
    font-size: 20px;
}
 .caution_box p{
	color:#fff;
}

.caution::before{
	content: '';
  display: inline-block;
  width: 30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(image/gif/ico_caution.gif);
    background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
    margin-top: -8px;
}


/* 画面サイズが768px以下の場合はここを読み込む-------------------------------------------------------------------　*/
@media screen and (max-width:768px) {
    
     /*基本グリッド*/
    .page {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto 1fr auto;
        min-height: 100vh;
    }
    /*ヘッダー*/
    .page-head {
        grid-column: 1;
        grid-row: 1;
        padding: 5px;
        background-color: #302e38;
        text-align: center;
    }
    .logo {
        width: 50px;
        height: auto;
        margin: -10px auto;
    }
    .main-logo {
	   width: 60%;
       height: auto;
    }
    /*メインコンテンツ*/
    .page-main {
        grid-column: 1;
        grid-row: 2;
        background-color: #ffffff;
    }
    /*ナビ（メニュー）*/
    .page-nav {
        grid-column: 1;
        grid-row: 2;
        z-index: 100;
        background-color: rgba(74, 78, 82, 0.9);
    }
    .page-nav a {
        display: block;
        padding: 10px;
        margin: 20px;
        border-bottom: solid 1px #aaa;
        color: #fff;
        font-size: 18px;
        text-decoration: none;
    }
    .page-nav a:hover{
        background-color: #66707b;
        color: #ffffff;   
    }
    
    /*ボタンの設定*/
    .page-btn,
    .page-btn-close {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        padding: 30px;
        border: none;
        background-color: transparent;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
    }
    .page-btn {
        background: url(image/gif/open.gif) no-repeat center center;
    }
    .page-btn-close {
        background: url(image/gif/close.gif) no-repeat center center;
    }
    /*フッター*/
    .page-foot {
        grid-column: 1;
        grid-row: 3;
        padding: 10px;
        background-color: #302e38;
        color: #ededed;
        text-align: center;
    }
    /*ボタン、ナビの非表示設定*/
    .close {
        display: none;
    }
    

    /* 記事の設定---------------------------------------------------------------------- */
    
    
    p {
    font-size: 18px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1em;
    }
    
    .page-contents li{
    text-indent: -0.4em;
    margin-bottom: 0.4em;
    font-size: 18px;
    color: #3b3a3a;
    line-height: 1.5em;
}

    .information p{
	font-size: 18px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1px;
    }
    
    h3{
        font-size: 20px;
        line-height: 1.8em;
        color: #242E42;
        border-left: 6px solid #242E42;
        border-bottom: 1px solid #242E42;
        padding-left: 5px;
        margin-bottom: 5px;
    }
    h4{
        font-size: 20px;
        line-height: 1.4em;
        color: #242E42;
    }
    h6{
        font-size: 20px;
        line-height: 1.8em;
        color: #242E42;
        border-left: solid 10px #242E42;
        border-right: solid 10px #242E42;
        background-color: #efefef;
        margin-bottom: 10px;
        text-align: center;
    }
    
    
    .page-contents-top {
	   display: grid;
       grid-template-columns: 20px 1fr 20px;
       grid-template-rows: auto 20px 300px 30px auto 30px 300px 30px auto 30px auto 30px auto 30px 75px 65px;
    }
    
    .page-contents {
	   display: grid;
       grid-template-columns: 20px 1fr 20px;
       grid-template-rows: auto 20px auto 20px 75px 65px;
    }
    
    
    .main-image {
	   grid-column: 1/-1;
       grid-row: 1;
       overflow: hidden;
    }
    .main-image img{
       width: 100%;
       height: auto;
    }
    .main-title {
	   grid-column: 2;
       grid-row: 1;
       font-size: 24px;
       margin-top: 60px;
    }
    .sub-title {
        grid-column: 2;
        grid-row: 1;
        font-size: 14px;
        margin-top: 30px;
    }
   .facebook {
	   grid-column: 2;
       grid-row: 3;
    }
    .page-text1 {
	   grid-column: 2;
       grid-row: 5;
    }
    .information {
	   grid-column: 2;
       grid-row: 7;
       writing-mode:vertical-rl;
       margin-right: 40px;
       overflow-x: auto;
       min-width: 1px;
       justify-self:stretch;
       padding-left: 40px;
    }
    .informationgradient{
	    grid-column: 2;
		grid-row: 7;
		justify-self: start;
		z-index: 10;
        float: left;
		width: 40px;
		content: 'あ';
		background: linear-gradient(
			to right, 
			rgba(255,255,255,1) 0%, 
			rgba(255,255,255,0) 100%
		);
    }
    .info-image {
	   grid-column: 3;
       grid-row: 7;
       background:url(image/img_season.jpg) center center no-repeat;
       background-size: cover;
       display: block;
       margin-left: -30px;
    }
    .page-text2{
        grid-column: 2;
        grid-row: 9;
    }
    .page-place {
	   display: grid;
       grid-template-columns: 1fr 3fr;
       grid-template-rows: 257px 20px 257px;
       margin-bottom: 1em;
    }
    .page-place1 {
	   grid-column: 1;
       grid-row: 1;
       overflow: hidden;
    }
    .page-place1-text {
	   grid-column: 1;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 90;
       background-color: #6F001C;
       color: #FFF;
       width: 26px;
       font-size: 16px;
       padding-top: 10px;
    }
    .page-place1-text2{
        grid-column: 2;
        grid-row:1;
        margin-left: 20px;
    }
    
    .page-place2 {
        grid-column: 1;
        grid-row: 3;
        overflow: hidden;
    }
    .page-place2-text {
	   grid-column: 1;
       grid-row: 3;
       writing-mode:vertical-lr;
       z-index: 90;
       background-color: #302E38;
       color: #FFF;
       width: 26px;
       font-size: 16px;
        padding-top: 10px;
    }
    .page-place2-text2{
        grid-column: 2;
        grid-row:3; 
        margin-left: 20px;
    }
    .page-text3 {
	   grid-column: 2;
       grid-row: 11;
    }
    .page-text4{
        grid-column: 2;
        grid-row: 13;
    }
    .page-itemlist {
	   display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto auto auto auto;
    }
    
    .page-text4-text{
       background-color: #6F001C;
       color: #FFF;
       width: 100%;
       font-size: 22px;
       padding: 3px;
       text-align: center;
    }
    .item1{
        grid-column: 1;
        grid-row: 1;
        border-bottom: dashed thin #CCCCCC;
        padding-top: 10px;
    }
    .item2{
        grid-column: 1;
        grid-row: 2;
        border-bottom: dashed thin #CCCCCC;
    }
    .item3{
        grid-column: 1;
        grid-row: 3;
        border-bottom: dashed thin #CCCCCC;
    }
    .item4{
        grid-column: 1;
        grid-row: 4;
        border-bottom: dashed thin #CCCCCC;
    }
    .item5{
        grid-column: 1;
        grid-row: 5;
        border-bottom: dashed thin #CCCCCC;
    }
    .item6{
        grid-column: 1;
        grid-row: 6;
        border-bottom: dashed thin #CCCCCC;
    }
    .item1,.item2,.item3,.item4,.item5,.item6{
        margin: 10px 0px;
    }
    .page-itemlist img{
        float: left;
        margin: 0px 14px 10px 0px;
        width: 120px;
    }
    
    .page-bottom {
	   grid-column: 2;
       grid-row: -3;
    }
    .pagetop{
        display: block;
        width: 34px;
        height: 34px;
        background: url(image/bt_pagetop.png) center center #CCCCCC;
        float: right;
        margin-right: 20px;
        clear: none;
    }
    .call {
      grid-column: 2;
      grid-row: -2;
      text-align: center;
    }
  
    .call a{
        display: inline-block;
        width: 60%;
        height: 42px;
        line-height: 2.2em;
        background-color: #39d864;
        font-size: 18px;
        font-weight: bold;
        border-radius: 4px;
        color: #FFF;
    }
    
    /* --top以外のページ-- */
    
    .mainarticle {
	   grid-column: 2;
       grid-row: 3;
    }
    
    .grid1{
        padding: 10px 0px 30px 0px;
    }
    .grid1 .c1{
        width: 30vw;
        height: 30vw;
        float: left;
        margin-right: 15px;
    }
    .grid1 .c1 img{
        width: 100%;
        height: auto;
    }
    .grid1 .c3 ul {
        margin-top: 10px;
    }
    
    .grid2 .c2 img{
	   width: 100%;
       height: auto;
       margin-bottom: 40px;
    }
    
    .grid3 {
	   margin: 20px 0px 40px 0px;
       background-color: #efefef;
       padding-bottom: 20px;
    }
    
    .grid3 h5{
        font-size: 20px;
        line-height: 1.4em;
        color: #FFFFFF;
        background-color: #6F001C;
        text-align: center;
        margin-bottom: 5px;
    }
    .grid3 p{
        padding: 0px 15px;
    }
    .grid3 h6{
        border-right: none;
        border-left: none;
        border-bottom: dashed thin #cccccc;
        padding: 0px 15px;
    }
    
    .grid3 img{
        width: calc(100% - 20px);
        height: auto;
        margin: 0px 10px 0px 10px;
    }
    
    .grid4{
        display: grid;
        grid-row-gap: 5px;
        grid-template-columns: auto auto;
        margin-top: 15px;
    }
    .grid4 p{
	   border-bottom: dashed thin #cccccc;
    }
    .grid4 img{
        width: 18px;
        height: 18px;
        margin: auto 7px -3px 7px;
    }
    
    .grid4 p:nth-child(even){
        list-style: none;
        text-align:right;
        margin-right: 10px;
	   /*justify-self:end;*/
    }
    .grid5 .c1{
        grid-column: 1;
        grid-row: 1;
        background-color: #4D6A79;
        padding: 10px;
    }
    .grid5 p{
       color: #FFFFFF;
	   margin: 15px 5px 15px;
    }
    
    .grid5 .c2{
        grid-column: 3;
        grid-row: 1;
        background-color:  #4D6A79;
        padding: 10px;
        margin-bottom: 30px;
    }
    
    .grid5 img {
	   width: 100%;
       margin-bottom: -15px;
    }
    
    .title5_1 {
	   background-color: #6F001C;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    
    .title5_2 {
	   background-color: #302e38;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    
   
    
    .grid6 .c1{
        border-left: solid 10px #6F001C;
        background: url(image/img_i1.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
    }
    
    .grid6 .c3{
        border-left: solid 10px #6F001C;
        background: url(image/img_i2.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
    }

    .grid6 .c5{
        border-left: solid 10px #6F001C;
        background: url(image/img_i3.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
    }
   
    .grid6 .c7{
        border-left: solid 10px #6F001C;
        background: url(image/img_i4.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
    }
    .grid6 .c9{
        border-left: solid 10px #6F001C;
        background-size: contain;
        background-color: #242E42;
    }
    .grid6 .c1,.grid6 .c3,.grid6 .c5,.grid6 .c7,.grid6 .c9{
       color: #ffffff;
	   margin-bottom: 10px;
       padding: 10px 0px 10px 10px;
    }   
    .grid6 .c2,.grid6 .c4,.grid6 .c6,.grid6 .c8,.grid6 .c10 {
        padding-bottom: 30px;
    }
    
    .grid6 h4{
	   color: #ffffff;
    }


    /*youtube*/
    .grid_youtube{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 20px;
        padding:10px;
        text-align: center;
        margin-bottom: 40px;
    }

    .youtube{
        width: calc(100% - 10px);
        aspect-ratio: 16 / 9;
    }
    .youtube iframe {
        width: 100%;
        height: 100%;
    }
   
    
    
    
    .googlemap1 {
	   position: relative;
       width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
       height: 300px;
       padding-bottom: 56.25%;    /* padding-topでもOK */
       overflow: hidden;
    }
    .googlemap1 iframe{
	   border: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    /* 必要であれば!importantを付けてください */
        height: 100%;    /* 必要であれば!importantを付けてください */
    }
    
    
    
}

/*###################################################################################################################*/

/* 画面サイズが768pxから1024pxの場合はここを読み込む--------------------------------------------------------------　*/

@media screen and (min-width:768px) and (max-width:1024px) {

    
    /*　画面サイズが768px～1024pxの場合はここを読み込む　*/
    /*基本グリッド*/
    .page {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto 1fr auto;
        min-height: 100vh;
    }
    /*ヘッダー*/
    .page-head {
        grid-column: 1;
        grid-row: 1;
        padding: 5px;
        background-color: #302e38;
        text-align: center;
    }
    .logo {
        width: 50px;
        height: auto;
        margin: -10px auto;
    }
    .main-logo {
	   width: 400px;
    }
    /*メインコンテンツ*/
    .page-main {
        grid-column: 1;
        grid-row: 2;
        background-color: #ffffff;
    }
    /*ナビ（メニュー）*/
    .page-nav {
        grid-column: 1;
        grid-row: 2;
        z-index: 100;
        background-color: rgba(74, 78, 82, 0.9);
    }
    .page-nav a {
        display: block;
        padding: 10px;
        margin: 20px;
        border-bottom: solid 1px #aaa;
        color: #fff;
        font-size: 18px;
        text-decoration: none;
    }
    .page-nav a:hover{
        background-color: #66707b;
        color: #ffffff;   
    }
    
    /*ボタンの設定*/
    .page-btn,
    .page-btn-close {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        padding: 30px;
        border: none;
        background-color: transparent;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
    }
    .page-btn {
        background: url(image/gif/open.gif) no-repeat center center;
    }
    .page-btn-close {
        background: url(image/gif/close.gif) no-repeat center center;
    }
    /*フッター*/
    .page-foot {
        grid-column: 1;
        grid-row: 3;
        padding: 10px;
        background-color: #302e38;
        color: #ededed;
        text-align: center;
    }
    /*ボタン、ナビの非表示設定*/
    .close {
        display: none;
    }
    

    /* 記事の設定---------------------------------------------------------------------- */
    
   
    p {
    font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1em;
    }
    
    .page-contents li{
    text-indent: -0.4em;
    margin-bottom: 0.4em;
    font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
    }
    
    
    .information p{
	font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1px;
    }
    
    h3{
        font-size: 20px;
        line-height: 1.8em;
        color: #242E42;
        border-left: 6px solid #242E42;
        border-bottom: 1px solid #242E42;
        padding-left: 5px;
        margin-bottom: 5px;
    }
    h4{
        font-size: 18px;
        line-height: 1.8em;
        color: #242E42;
        margin-bottom: 5px;
    }
    h6{
        font-size: 16px;
        line-height: 1.8em;
        color: #242E42;
        border-left: solid 10px #242E42;
        border-right: solid 10px #242E42;
        background-color: #efefef;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .page-contents-top {
	   display: grid;
       grid-template-columns: 20px 1fr 1fr 1fr 30px 1fr 1fr 1fr 20px;
       grid-template-rows: 350px 20px 300px 40px 260px 40px auto 40px auto 40px auto 65px 65px;
    }
    
    .page-contents{
	   display: grid;
       grid-template-columns: 20px 1fr 1fr 1fr 30px 1fr 1fr 1fr 20px;
       grid-template-rows: 350px 20px  auto 20px 65px 65px;
    }
    
    .main-image {
	   grid-column: 1/10;
       grid-row: 1;
       overflow: hidden;
    }
    .main-image img{
       width: 100%;
       height: auto;
    }
    
    .main-title {
	   grid-column: 2/9;
       grid-row: 1;
       font-size: 42px;
       margin-top: 80px;
    }
    .sub-title {
        grid-column: 2/9;
        grid-row: 1;
        font-size: 16px;
        margin-top: 46px;
    }
    .facebook {
	   grid-column: 2/6;
       grid-row: 3;
    }
    .page-text1 {
	   grid-column: 6/9;
       grid-row: 3;
       margin-left: 20px;
    }
    .information {
	   grid-column: 2/8;
       grid-row: 5;
       writing-mode:vertical-rl;
       margin-right: 20px;
       overflow-x: auto;
       min-width: 1px;
       justify-self:stretch;
       padding-left: 40px;
    }
    .informationgradient{
	    grid-column: 2;
		grid-row: 5;
		justify-self: start;
		z-index: 10;
        float: left;
		width: 40px;
		content: 'あ';
		background: linear-gradient(
			to right, 
			rgba(255,255,255,1) 0%, 
			rgba(255,255,255,0) 100%
		);
    }
    .info-image {
	   grid-column: 8;
       grid-row: 5;
       background:url(image/img_season.jpg) center center no-repeat;
       background-size: cover;
       display: block;
    }
    
    .page-text2{
        grid-column: 2/9;
        grid-row: 7;
    }
    
    .page-place {
	   display: grid;
       grid-template-columns: 1fr 2fr 30px 1fr 2fr;
       grid-template-rows: 257px;
       margin-bottom: 1em;
    }
    
    .page-place1 {
	   grid-column: 1;
       grid-row: 1;
       overflow: hidden;
    }
    .page-place1-text {
	   grid-column: 1;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 90;
       background-color: #6F001C;
       color: #FFF;
       width: 26px;
       font-size: 16px;
       padding-top: 10px;
    }
    .page-place1-text2{
        grid-column: 2;
        grid-row:1;
        margin-left: 20px;
    }
    
    
    .page-place2 {
        grid-column: 4;
        grid-row: 1;
        overflow: hidden;
    }
    .page-place2-text {
	   grid-column: 4;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 90;
       background-color: #302E38;
       color: #FFF;
       width: 26px;
       font-size: 16px;
        padding-top: 10px;
    }
    .page-place2-text2{
        grid-column: 5;
        grid-row:1; 
        margin-left: 20px;
    }
    
    .page-text3 {
	   grid-column: 2/9;
       grid-row: 9;
    }
    
    .page-text4{
        grid-column: 2/9;
        grid-row: 11;
    }
    .page-text4-text{
       background-color: #6F001C;
       color: #FFF;
       width: 100%;
       font-size: 16px;
       padding: 3px;
       text-align: center;
    }
    .page-itemlist {
	   display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto auto auto;
    }
    .item1 {
	   grid-column: 1;
       grid-row: 1;
       margin-top: 10px;
       border-bottom: dashed thin #CCC;
    }
    .item1 img{
	   float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item2{
       grid-column: 1;
       grid-row: 2;
       border-bottom: dashed thin #CCC;
       margin-top: 10px;
       padding-bottom: 10px;
    }
    .item2 img{
	   float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item3{
       grid-column: 1;
       grid-row: 3;
       margin-top: 10px;
    }
    .item3 img{
	   float: right;
       margin-left: 20px;
       width: 114px;
       height: auto;
    }
    .item4{
       grid-column: 2;
       grid-row: 1/3;
       margin-left: 10px;
       margin-top: 10px;
       padding-left: 10px;
       border-left: dashed thin #CCC;
       border-bottom: dashed thin #CCC;
    }
    .item4 img{
       float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item5{
        grid-column: 2;
        grid-row: 3;
        margin-left: 10px;
        margin-top: 0px;
        padding-top: 10px;
        padding-left: 10px;
        border-left: dashed thin #CCC;
     }
     .item5 img{
        float: left;
        margin-right: 20px;
        width: 114px;
        height: auto;
     }
     .item6{
        grid-column: 1/-1;
        grid-row: 4;
        margin-left: 0px;
        margin-top: 0px;
        padding-top: 10px;
        padding-left: 10px;
        border-top: dashed thin #CCC;
        
     }
     .item6 img{
        float: left;
        margin-right: 20px;
        width: 114px;
        height: auto;
     }


    .page-bottom {
	   grid-column: 2/9;
       grid-row: -3;
    }
    .pagetop{
        display: block;
        width: 34px;
        height: 34px;
        background: url(image/bt_pagetop.png) center center #CCCCCC;
        float: right;
        margin-right: 20px;
        clear: none;
    }
    .pagetop:hover{
        cursor: pointer;
        background-color: #bbbdc3;
    }
    .call {
      grid-column: 2/9;
      grid-row: -2;
      text-align: center;
    }
  
    .call a{
        display: inline-block;
        width: 50%;
        height: 42px;
        line-height: 2.2em;
        background-color: #39d864;
        font-size: 18px;
        font-weight: bold;
        border-radius: 4px;
        color: #FFF;
    }
    
    
    /* --top以外のページ-- */
    
    .mainarticle {
	   grid-column: 2/9;
       grid-row: 3;
    }
    
    .grid1{
        display: grid;
        grid-template-columns: 1fr 20px 3fr 20px 2fr;
        grid-template-rows: 1fr 20px;
        padding: 10px 0px 10px 0px;
    }
    .grid1 .c1{
        grid-column: 1;
        grid-row: 1;
    }
    .grid1 .c1 img{
        width: 100%;
        height: auto;
    }
    .grid1 .c2 {
	   grid-column: 3;
       grid-row: 1;
    }
    
    .grid1 .c3 {
	   grid-column: 5;
       grid-row: 1;
    }
    .grid1 .c4{
        grid-column: 1/4;
        grid-row: 1;
        background: url(image/bk_placenta.jpg) no-repeat center bottom;
    }
    
    .grid2{
        display: grid;
        grid-template-columns: 1fr 20px 1fr 20px 1fr;
        grid-template-rows: 1fr;
        padding: 10px 0px 30px 0px;
    }
    
    .grid2 .c1{
        grid-column: 1/4;
        grid-row: 1;
    }
    .grid2 .c2{
       grid-column: 5;
	   grid-row: 1;
       align-self: end;
    }
    .grid2 .c2 img{
	   width: 100%;
       height: auto;
    }
    
    .grid3{
        display: grid;
        grid-template-columns: 26px 20px 2fr 20px 1fr;
        grid-template-rows: 1;
        padding: 10px 0px 30px 0px; 
    }
    
    .grid3 h5{
        grid-column: 1;
        grid-row: 1;
        writing-mode:vertical-lr;
       background-color: #6F001C;
       color: #FFF;
       width: 26px;
       font-size: 16px;
       padding-top: 10px;
    }
    
    .grid3 .c1{
	   grid-column: 3;
       grid-row: 1;
    }
    
    .grid3 img{
        width: 100%;
        height: auto;
    }
    
    .grid3 .c2 {
	 grid-column: 5;
        grid-row: 1;
    }
    
    .grid4{
        display: grid;
        grid-row-gap: 5px;
        grid-template-columns: auto auto;
        margin-top: 15px;
    }
    .grid4 p{
	   border-bottom: dashed thin #cccccc;
    }
    .grid4 img{
        width: 18px;
        height: 18px;
        margin: auto 7px -3px 7px;
    }
    
    .grid4 p:nth-child(even){
        list-style: none;
        text-align:right;
        margin-right: 10px;
	   /*justify-self:end;*/
    }
    
    .grid5{
        display: grid;
        grid-template-columns: 1fr 20px 1fr;
        grid-template-rows: 1fr;
        padding: 20px 0px 30px 0px; 
    }
    
    
    .grid5 .c1{
        grid-column: 1;
        grid-row: 1;
        background-color: #4D6A79;
        padding: 10px;
    }
    .grid5 p{
       color: #FFFFFF;
	   margin: 15px 5px 15px;
    }
    
    .grid5 .c2{
        grid-column: 3;
        grid-row: 1;
        background-color:  #4D6A79;
        padding: 10px;
    }
    
    .grid5 img {
	   width: 100%;
       margin-bottom: -15px;
    }
    
    .title5_1 {
	   background-color: #6F001C;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    
    .title5_2 {
	   background-color: #302e38;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    
        .grid6{
        display: grid;
        grid-template-columns: 1fr 20px 1fr;
        grid-template-rows: auto auto 30px auto auto 30px auto auto;
    }
    
    .grid6 .c1{
        grid-column: 1;
        grid-row: 1;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i1.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    
    .grid6 .c2{
        grid-column: 1;  
        grid-row: 2;
        padding-top: 10px;
    }
    .grid6 .c3{
         grid-column: 3;
        grid-row: 1;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i2.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c4{
        grid-column: 3;  
        grid-row: 2;
        padding-top: 10px;
    }
    .grid6 .c5{
        grid-column: 1;
        grid-row: 4;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i3.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c6{
        grid-column: 1;  
        grid-row: 5;
        padding-top: 10px;
    }
    .grid6 .c7{
        grid-column: 3;
        grid-row: 4;
        border-left: solid 10px #6F001C;
        background: url(image/img_i4.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c8{
        grid-column: 3;  
        grid-row: 5;
        padding-top: 10px;
    }
    
    .grid6 .c9{
        grid-column: 1/4;  
        grid-row: 7;
        padding-top: 10px;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
        border-left: solid 10px #6F001C;
    }
    .grid6 .c10{
        grid-column:1/4;
        grid-row: 8;
        padding-top: 10px;
    }
    
    
    .grid6 h4{
	   color: #ffffff;
    }



    /*youtube*/
    .grid_youtube{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 20px;
        row-gap: 20px;
        padding:10px;
        margin-bottom: 40px;
    }

    .youtube{
        width: calc(100% - 10px);
        aspect-ratio: 16 / 9;
    }
    .youtube iframe {
        width: 100%;
        height: 100%;
    }

    
    .googlemap1 {
	   position: relative;
       width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
       height: 300px;
       padding-bottom: 56.25%;    /* padding-topでもOK */
       overflow: hidden;
    }
    .googlemap1 iframe{
	   border: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    /* 必要であれば!importantを付けてください */
        height: 100%;    /* 必要であれば!importantを付けてください */
    }
    
    
}






/*###################################################################################################################*/





/* 画面サイズが1024px以上の場合はここを読み込む------------------------------------------------------------------　*/

@media screen and (min-width:1024px) {

    /*基本グリッド*/
    .page {
        display: grid;
        --side;
        grid-template-columns: var(--side) 256px 768px var(--side);
        grid-template-rows: 160px auto 60px;
        max-width: 1024px;
        --side: calc((100vw - 1024px)/2);
    }
    .page-head {
        grid-column: 2;
        grid-row: 1;
        background-color: #302e38;
        text-align: center;
    }
    .logo {
        width: 90px;
        height: auto;
        margin: 0px auto;
        padding: 10px 5px 14px 5px;
        border-left: solid thin #CCCCCC;
        border-bottom:  solid thin #CCCCCC;
        border-right:  solid thin #CCCCCC;
    }
    .main-logo {
	   width: 460px;
    }
    /*メインコンテンツ*/
    .page-main {
        grid-column: 3;
        grid-row: 1 /-1;
        background-color: #ffffff;
    }
    /*ナビ（メニュー）*/
    .page-nav {
        grid-column: 2;
        grid-row: 2;
        display: block;
        background-color: #302e38;
    }
    .page-nav a {
        display: block;
        margin: 0px 10px;
        padding: 10px;
        border-bottom: solid 1px #777c81;
        color: #ededed;
        font-size: 16px;
        text-decoration: none;
    }
    .page-nav a:hover {
        background-color: #66707b;
        color: #ffffff;
    }
    .page-foot {
        grid-column: 2;
        grid-row: 3;
        font-size: 14px;
        background-color: #302e38;
        text-align: center;
        padding: 20px 0px;
    }
    /*ボタンの設定  全て非表示*/
    .page-btn,
    .page-btn-close {
        display: none;
    }
    
    /* 記事の設定---------------------------------------------------------------------- */


    p {
    font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1em;
}
    
    .page-contents li{
    text-indent: -0.4em;
    margin-bottom: 0.4em;
    font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
}

.information p{
	font-size: 16px;
    color: #3b3a3a;
    line-height: 1.5em;
    margin-bottom: 1px;
}
    
    h3{
        font-size: 20px;
        line-height: 1.8em;
        color: #242E42;
        border-left: 6px solid #242E42;
        border-bottom: 1px solid #242E42;
        padding-left: 5px;
        padding-bottom: 2px;
        margin-bottom: 5px;
    }
    h4{
        font-size: 18px;
        line-height: 1.8em;
        color: #242E42;
    }
    h6{
        font-size: 16px;
        line-height: 1.8em;
        color: #242E42;
        border-left: solid 10px #242E42;
        border-right: solid 10px #242E42;
        background-color: #efefef;
        margin-bottom: 10px;
        text-align: center;
    }
    
    
    .page-contents-top {
	   display: grid;
       grid-template-columns: 20px 1fr 1fr 1fr 30px 1fr 1fr 1fr 20px;
       grid-template-rows: 350px 20px 300px 40px 260px 40px auto 40px auto 40px auto 65px;
    }
    
    .page-contents{
	   display: grid;
       grid-template-columns: 20px 1fr 1fr 1fr 30px 1fr 1fr 1fr 20px;
       grid-template-rows: 350px 20px  auto 20px 65px;
    }
    
    .main-image {
	   grid-column: 1/10;
       grid-row: 1;
    }
    
    .main-title {
	   grid-column: 2/9;
       grid-row: 1;
       font-size: 42px;
       margin-top: 80px;
    }
    .sub-title {
        grid-column: 2/9;
        grid-row: 1;
        font-size: 16px;
        margin-top: 50px;
    }
    .facebook {
	   grid-column: 2/7;
       grid-row: 3;
    }
    .page-text1 {
	   grid-column: 7/9;
       grid-row: 3;
       margin-left: 20px;
    }
    .information {
	   grid-column: 2/8;
       grid-row: 5;
       writing-mode:vertical-rl;
       margin-right: 20px;
       overflow-x: auto;
       min-width: 1px;
       justify-self:stretch;
       padding-left: 40px;
    }
    .informationgradient{
	    grid-column: 2;
		grid-row: 5;
		justify-self: start;
		z-index: 10;
        float: left;
		width: 40px;
		content: 'あ';
		background: linear-gradient(
			to right, 
			rgba(255,255,255,1) 0%, 
			rgba(255,255,255,0) 100%
		);
    }
    .info-image {
	   grid-column: 8;
       grid-row: 5;
       background:url(image/img_season.jpg) center center no-repeat;
       background-size: cover;
       display: block;
    }
    
    .page-text2{
        grid-column: 2/9;
        grid-row: 7;
    }
    
    .page-place {
	   display: grid;
       grid-template-columns: 1fr 2fr 30px 1fr 2fr;
       grid-template-rows: 257px;
       margin-bottom: 1em;
    }
    
    .page-place1 {
	   grid-column: 1;
       grid-row: 1;
       overflow: hidden;
    }
    .page-place1-text {
	   grid-column: 1;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 100;
       background-color: #6F001C;
       color: #FFF;
       width: 26px;
       font-size: 16px;
       padding-top: 10px;
    }
    .page-place1-text2{
        grid-column: 2;
        grid-row:1;
        margin-left: 20px;
    }
    
    
    .page-place2 {
        grid-column: 4;
        grid-row: 1;
        overflow: hidden;
    }
    .page-place2-text {
	   grid-column: 4;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 100;
       
    }
    .page-place2-text {
	   grid-column: 4;
       grid-row: 1;
       writing-mode:vertical-lr;
       z-index: 100;
       background-color: #302E38;
       color: #FFF;
       width: 26px;
       font-size: 16px;
        padding-top: 10px;
    }
    .page-place2-text2{
        grid-column: 5;
        grid-row:1; 
        margin-left: 20px;
    }
    
    .page-text3 {
	   grid-column: 2/9;
       grid-row: 9;
    }
    .page-text4{
        grid-column: 2/9;
        grid-row: 11;
    }
    .page-text4-text{
       background-color: #6F001C;
       color: #FFF;
       width: 100%;
       font-size: 16px;
       padding: 3px;
       text-align: center;
    }
    .page-itemlist {
	   display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto auto auto;
    }
    .item1 {
	   grid-column: 1;
       grid-row: 1;
       margin-top: 10px;
       border-bottom: dashed thin #CCC;
    }
    .item1 img{
	   float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item2{
       grid-column: 1;
       grid-row: 2;
       border-bottom: dashed thin #CCC;
       margin-top: 10px;
       padding-bottom: 10px;
    }
    .item2 img{
	   float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item3{
       grid-column: 1;
       grid-row: 3;
       margin-top: 10px;
    }
    .item3 img{
	   float: right;
       margin-left: 20px;
       width: 114px;
       height: auto;
    }
    .item4{
       grid-column: 2;
       grid-row: 1/3;
       margin-left: 10px;
       margin-top: 10px;
       padding-left: 10px;
       border-left: dashed thin #CCC;
       border-bottom: dashed thin #CCC;
    }
    .item4 img{
       float: left;
       margin-right: 20px;
       width: 114px;
       height: auto;
    }
    .item5{
        grid-column: 2;
        grid-row: 3;
        margin-left: 10px;
        margin-top: 0px;
        padding-top: 10px;
        padding-left: 10px;
        border-left: dashed thin #CCC;
        
     }
     .item5 img{
        float: left;
        margin-right: 20px;
        width: 114px;
        height: auto;
     }

     .item6{
        grid-column: 1/-1;
        grid-row: 4;
        margin-left: 0px;
        margin-top: 0px;
        padding-top: 10px;
        padding-left: 10px;
        border-top: dashed thin #CCC;
        
     }
     .item6 img{
        float: left;
        margin-right: 20px;
        width: 114px;
        height: auto;
     }



    .page-bottom {
	   grid-column: 2/9;
       grid-row: -2;
    }
    .pagetop{
        display: block;
        width: 34px;
        height: 34px;
        background: url(image/bt_pagetop.png) center center #CCCCCC;
        float: right;
        margin-right: 20px;
    }
    .pagetop:hover{
        cursor: pointer;
        background-color: #bbbdc3;
    }
    .call {
	   display: none;
    }
    
    /* --top以外のページ-- */
    
    .mainarticle {
	   grid-column: 2/9;
       grid-row: 3;
    }
    
    .grid1{
        display: grid;
        grid-template-columns: 1fr 20px 3fr 20px 2fr;
        grid-template-rows: 1fr;
        padding: 10px 0px 30px 0px;
    }
    .grid1 .c1{
        grid-column: 1;
        grid-row: 1;
    }
    .grid1 .c1 img{
        width: 100%;
        height: auto;
    }
    .grid1 .c2 {
	   grid-column: 3;
       grid-row: 1;
    }
    .grid1 .c4{
        grid-column: 1/4;
        grid-row: 1;
        background: url(image/bk_placenta.jpg) no-repeat center bottom;
    }
    .grid1 .c3 {
	   grid-column: 5;
       grid-row: 1;
    }
    
    .grid2{
        display: grid;
        grid-template-columns: 1fr 20px 1fr 20px 1fr;
        grid-template-rows: 1fr;
        padding: 10px 0px 30px 0px;
    }
    
    .grid2 .c1{
        grid-column: 1/4;
        grid-row: 1;
    }
    .grid2 .c2{
       grid-column: 5;
	   grid-row: 1;
       align-self: end;
    }
    .grid2 .c2 img{
	   width: 100%;
       height: auto;
    }
    
    .grid3{
        display: grid;
        grid-template-columns: 26px 20px 2fr 20px 1fr;
        grid-template-rows: 1;
        padding: 10px 0px 30px 0px; 
    }
    
    .grid3 h5{
        grid-column: 1;
        grid-row: 1;
        writing-mode:vertical-lr;
       background-color: #6F001C;
       color: #FFF;
       width: 26px;
       font-size: 16px;
       padding-top: 10px;
    }
    
    .grid3 .c1{
	   grid-column: 3;
       grid-row: 1;
    }
    
    .grid3 img{
        width: 100%;
        height: auto;
    }
    
    .grid3 .c2 {
	 grid-column: 5;
        grid-row: 1;
    }
    .grid4{
        display: grid;
        grid-row-gap: 5px;
        grid-template-columns: auto auto;
        margin-top: 15px;
    }
    
    .grid4 p{
	   border-bottom: dashed thin #cccccc;
    }
    .grid4 img{
        width: 18px;
        height: 18px;
        margin: auto 7px -3px 7px;
    }
    
    .grid4 p:nth-child(even){
        list-style: none;
        text-align:right;
        margin-right: 10px;
	   /*justify-self:end;*/
    }
    
    .grid5{
        display: grid;
        grid-template-columns: 1fr 20px 1fr;
        grid-template-rows: 1fr;
        padding: 20px 0px 30px 0px; 
    }
    
    .grid5 .c1{
        grid-column: 1;
        grid-row: 1;
        background-color: #4D6A79;
        padding: 10px;
    }
    .grid5 p{
       color: #FFFFFF;
	   margin: 15px 5px 15px;
    }
    
    .grid5 .c2{
        grid-column: 3;
        grid-row: 1;
        background-color:  #4D6A79;
        padding: 10px;
    }
    
    .grid5 img {
	   width: 100%;
       margin-bottom: -15px;
    }
    
    .title5_1 {
	   background-color: #6F001C;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    
    .title5_2 {
	   background-color: #302e38;
       color: #FFF;
       font-size: 16px;
       text-align: center;
       padding: 5px;
    }
    .grid6{
        display: grid;
        grid-template-columns: 1fr 20px 1fr;
        grid-template-rows: auto auto 30px auto auto 30px auto auto;
    }
    
    .grid6 .c1{
        grid-column: 1;
        grid-row: 1;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i1.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    
    .grid6 .c2{
        grid-column: 1;  
        grid-row: 2;
        padding-top: 10px;
    }
    .grid6 .c3{
         grid-column: 3;
        grid-row: 1;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i2.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c4{
        grid-column: 3;  
        grid-row: 2;
        padding-top: 10px;
    }
    .grid6 .c5{
        grid-column: 1;
        grid-row: 4;
        border-left: solid 10px #6F001C;;
        background: url(image/img_i3.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c6{
        grid-column: 1;  
        grid-row: 5;
        padding-top: 10px;
    }
    .grid6 .c7{
        grid-column: 3;
        grid-row: 4;
        border-left: solid 10px #6F001C;
        background: url(image/img_i4.gif) no-repeat right bottom;
        background-size: contain;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
    }
    .grid6 .c8{
        grid-column: 3;  
        grid-row: 5;
        padding-top: 10px;
    }
    
    .grid6 .c9{
        grid-column: 1/4;  
        grid-row: 7;
        padding-top: 10px;
        background-color: #242E42;
        padding: 10px 0px 2px 10px;
        color: #ffffff;
        border-left: solid 10px #6F001C;
    }
    .grid6 .c10{
        grid-column:1/4;
        grid-row: 8;
        padding-top: 10px;
    }
    
    .grid6 h4{
	   color: #ffffff;
    }
    

    /*youtube*/
    .grid_youtube{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 20px;
        row-gap: 20px;
        padding:10px;
        margin-bottom: 40px;
    }

    .youtube{
        width: calc(100% - 10px);
        aspect-ratio: 16 / 9;
    }
    .youtube iframe {
        width: 100%;
        height: 100%;
    }




    
    .googlemap1 {
	   position: relative;
       width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
       height: 300px;
       padding-bottom: 56.25%;    /* padding-topでもOK */
       overflow: hidden;
    }
    .googlemap1 iframe{
	   border: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    /* 必要であれば!importantを付けてください */
        height: 100%;    /* 必要であれば!importantを付けてください */
    }
    
    
    
}