﻿@charset "UTF-8";

/* CSS infomation
Summary      PC Type Top
Create       2022-9-18
Last update  2022-9-18
*/
/* BASIC DESIGN */
body {
  width: 100%; height: auto; margin: 0px auto; padding: 0.1% 0% 0% 0%;
  display: grid; display: -ms-grid;
  grid-template-columns: 0.2fr repeat(10,1f) 0.2fr;
  -ms-grid-columns:  0.2fr repeat(10,1f) 0.2fr;
  grid-template-rows:
   [head] 60px
   [mainarea] auto
   [navarea] auto
   [article] auto
   [aside] auto
   [foot] 39px;
   -ms-grid-rows:
   60px
   auto
   auto
   auto
   auto
   39px;
   grid-row-gap: 0%;
   row-gap: 0%;
   }
body > *
  {
   grid-column: 1 / 13;
   background: #ffffff;
   /*z-index: -1;*/
   font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ",sans-serif;
  }
/* HEADER */
body > header {grid-column: 1 / 13; grid-row: head; background: width: 100% height: 100vh; background-image: url(./../img/header.jpg); background-size: cover; background-position: center;}
body > header h1 {margin: 0%; padding: 1.3% 0% 0% 2%; color: #FFFFFF; font-size: 0.4em; line-height: 1.3;}
body > header ul {margin: 0%; padding: 7.5% 1.8% 0% 0%; color: #b1cc88; font-size: 0.55em; font-weight: lighter; list-style: none; text-align: right;}
body > header ul li {display: inline-block;}
body > header a:link {color: #FFFFFF; font-weight: bold; text-decoration: none;}
body > header a:visited {color: #b1cc88; font-weight: bold; text-decoration: none; }
body > header a:hover, a:active {color: #b1cc88; text-decoration: underline; }
/* MAIN */
body > main {display: grid; display: -ms-grid; grid-column: 1 /13; grid-row: mainarea;}
body > main h1{grid-column: 1 / 13; grid-row: 1; margin: 0%; padding: 3% 2% 0% 2%; font-size: 1.07em; line-height: 1.7; text-align: justify;}
body > main p{grid-column: 1 / 13; grid-row: 2; margin: 0%; padding: 0.8% 2% 2% 2%; font-size: 0.95em; line-height: 1.73;}
body > main p span{display: none;}
body > main #phot1{grid-column: 1 / 1; grid-row: 3 / 4; width: 100%}
body > main #phot1 img {width: 0%; height: 0%; margin: 0%; padding: 3% 0% 0% 0%;}
body > main #phot2{grid-column: 1 / 13; grid-row: 3 / 5; width: 100%}
body > main #phot2 img {width: 100%; height: 95%; margin: 0%; padding: 3% 0% 0% 0%;}
   /*別バージョン*/
body > main #phot1-T{grid-column: 1 / 13; grid-row: 3 / 5; width: 100%}
body > main #phot1-T img {width: 100%; height: 95%; margin: 0%; padding: 2% 0% 0% 0%;}
body > main #phot2-T{grid-column: 1 / 1; grid-row: 3 / 4; width: 100%}
body > main #phot2-T img {width: 0%; height: 0%; margin: 0%; padding: 2% 0% 0% 0%;}
   /* 展示・アクセス部分 ・PNG画像のもの*/
body > main .text{grid-column: 1 / 7; grid-row: 3 / 5; width: 90%;　height: 100%; margin: 0%; padding: 3.5% 4.5% 1% 4.5%; color: #fff; font-size: 1.0em; font-weight: 500; line-height: 1.53; text-align: justify;}
body > main .text-s{display: block; width: 100%;　height: auto; margin: 0%; padding: 1.5% 2% 1% 0%; line-height: 1.8; font-size: 1.25em; font-weight: bolder; letter-spacing: -0.008em;}
body > main .text-ss{display: block; width: 100%;　height: auto; margin: 0%; padding: 1.5% 2% 1% 0%; line-height: 1.8; font-size: 1.3em; font-weight: bolder;}
body > main .text-sss{display: block; width: 100%;　height: auto; margin: 0%; padding: 1% 2% 1% 0%; line-height: 1.8; font-size: 1.2em; font-weight: bolder;}
body > main h2{grid-column: 1 / 13; grid-row: 6; margin: 0%; padding: 5% 0px 5% 10%; font-size: 0.8em; line-height: 0;}
body > main h2 span{display: none;}
body > main p span{display: none;}
    /* LINK関連・その他*/
body > main h1 a:link {color: #000000; text-decoration: none;}
body > main h1 a:visited {color: #000000; text-decoration: none;}
body > main h1 a:hover, a:active {color: #000000; text-decoration: underline;}
body > main .text-s a:link {color: #FFFFFF; text-decoration: none;}
body > main .text-s a:visited {color: #FFFFFF; text-decoration: none; }
body > main .text-s a:hover, a:active {color: #ffffff; text-decoration: underline; }
body > main .text-ss a:link {color: #FFFFFF; text-decoration: none;}
body > main .text-ss a:visited {color: #FFFFFF; text-decoration: none; }
body > main .text-ss a:hover, a:active {color: #ffffff; text-decoration: underline; }
body > main .text span {display: none;}
/* NAVI */
body > nav {display: grid; grid-template-columns: 50% 50%; grid-template-rows: 1/2 1/2; margin: -13% 0% 0% 0%}
body > nav li {width: 100%; margin: 0px auto; padding: 0px; text-align: center; line-height: 2.4em; list-style-type: none;}
body > nav li a {display: block; width: auto; height: 2.3em; color: #fff; font-size: 0.9em; font-weight: bold; padding: 0%; background: #574638; text-decoration: none;  text-align: center; justify-items: center;}
body > nav li a:hover {background: #cc8885; text-decoration: underline;}
body > nav li a.active {background: #cc8885; text-decoration: underline;}
/* ARTICLE */
body > article {display: grid; display: -ms-grid; grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: article;}
body > article h1 {grid-column: 1 / 13; -ms-grid-column: 1 / 13;grid-row: 1; -ms-grid-row: 1; margin: 0%; padding: 5% 5% 0% 10%; font-size: 0.95em; font-weight: 800; line-height: 2.0; text-align: justify;}
body > article #text {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 2; -ms-grid-row: 2; margin: 0%; padding: 5% 5% 0% 10%; font-size: 0.9em; font-weight: 800; line-height: 2.0; text-align: justify;}
body > article #phot2-B {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 3; -ms-grid-row: 3; width: 100%; height: auto; margin: 0% auto; margin: 7.1% 0% -0.8% 0%; padding: 0% 0% 0% 0%; text-align:center;}
body > article #phot2-B img {width: 100%; height: auto; margin: 0% auto; padding: 0%;}
body > article .Map{grid-column: 1 / 13; -ms-grid-column: 1 / 13;grid-row: 3; -ms-grid-row: 3; height: 0; overflow: hidden; margin: 5% 0% 0% 0%; padding-bottom: 56.5%; position: relative;}
body > article .Map iframe{position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
  /* 個別詳細紹介 */
body > article .france {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 5; -ms-grid-row: 5; width: 100%; height: auto; margin: 0% auto 0px auto; padding: 0%; font-size: 0.8em;  background: blue; color: #FFFFFF; line-height: 1.6; text-indent: 3.6%;}
body > article #article-phot1 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 6; -ms-grid-row: 6; margin: 0%; padding: 8% 0% 0% 0%; text-align:center;}
body > article #article-phot1 img {width: 28.25%; height: auto; margin: 0% auto; padding: 0%;}
body > article #article-phot1-w {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 6; -ms-grid-row: 6; margin: 6.8% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot1-w img {width: 50%; height: auto; margin: 0% auto; padding: 0%;}
body > article #text-1 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 7; -ms-grid-row: 7; width: 92%; height: auto; margin: 0% auto 0% auto; padding: 5.5% 0% 0% 0%; font-size: 0.95em; font-weight: 400; line-height: 1.8; text-align: justify;}
body > article .japan {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 8; -ms-grid-row: 8; width: 100%; height: auto; margin: 10% 0% 0% 0%; padding: 0%; font-size: 0.9em; color: red; font-weight: 600; line-height: 1.6; text-indent: 4.1%;}
body > article #article-phot2 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 9; -ms-grid-row: 9; margin: 6% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot2 img {width: 50%; height: auto; margin: 0% auto; padding: 0%;}
body > article #text-2 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 10; -ms-grid-row: 10; width: 92%; height: auto; margin: 0% auto 0% auto; padding: 5.5% 0% 0% 0%; font-size: 0.95em; font-weight: 400; line-height: 1.8; text-align: justify;}
body > article #article-phot3 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 11; -ms-grid-row: 11; margin: 6% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot3 img {width: 50%; height: auto; margin: 0% auto; padding: 0%;}
body > article #article-phot3-h {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 11; -ms-grid-row: 11; margin: 6% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot3-h img {width: 28.25%; height: auto; margin: 0% auto; padding: 0%;}
body > article #text-3 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 12; -ms-grid-row: 12; width: 92%; height: auto; margin: 0% auto 0% auto; padding: 5.5% 0% 0% 0%; font-size: 0.95em; font-weight: 400; line-height: 1.8; text-align: justify;}
body > article #article-phot4 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 13; -ms-grid-row: 13; margin: 6% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot4 img {width: 50%; height: auto; margin: 0% auto; padding: 0%;}
body > article #text-4 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 14; -ms-grid-row: 14; width: 92%; height: auto; margin: 0% auto 0% auto; padding: 5.5% 0% 0% 0%; font-size: 0.95em; font-weight: 400; line-height: 1.8;text-align: justify;}
body > article .kimi {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 15; -ms-grid-row: 15; width: 100%; margin: 10% auto 0% auto; padding: 0%; font-size: 0.9em; background: red; color: #FFFFFF; font-weight: 600; line-height: 1.6; letter-spacing: -0.05em; text-indent: 4.1%;}
body > article #article-phot5 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 16; -ms-grid-row: 16; margin: 6.8% 0% 0% 0%; padding: 0%; text-align:center;}
body > article #article-phot5 img {width: 50%; height: auto; margin: 0%; padding: 0%;}
body > article #text-5 {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: 17; -ms-grid-row: 17; width: 92%; height: auto; margin: 0% auto 0% auto; padding: 5.5% 0% 0% 0%; font-size: 0.95em; font-weight: 400; line-height: 1.8;text-align: justify;}
    /* LINK関連・その他*/
body > article a:link {color: #000000; text-decoration: none;}
body > article a:visited {color: #000000; text-decoration: none; }
body > article a:hover, a:active {color: #000000; text-decoration: underline; }
body > article h1 span {display: none;}
body > article h2 span {display: none;}
body > article p span {display: none;}
body > article div span {display: none;}
/* ASIDE */
body > aside {grid-column: 1 / 13; -ms-grid-column: 1 / 13; grid-row: aside; -ms-grid-row: aside; margin: 0%; padding: 0%;}
body > aside a {grid-row: 1; -ms-grid-row: 1; display: block; width: 15%; height: 1.4em; color: #fff; font-size: 0.8em; font-weight: bold; margin: 12% auto 8.3% auto; padding: 0.45em 0% 0em 0%; background: #cc8885;
text-decoration: none; text-align: center;
border-top-left-radius:50px 70px;
border-top-right-radius:20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius:50px 70px;
-moz-border-radius-topleft:50px 70px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:50px 70px;
-webkit-border-top-left-radius:50px 70px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:50px 70px;}
    /* LINK関連・その他*/
body > aside a:hover {background: #574638; text-decoration: underline;}
body > aside a.active {background: #574638; text-decoration: underline;}
/* FOOTER */
body > footer {display: grid; display: -ms-grid; grid-column: 1 / 13; grid-row: foot; place-items: center; background: width: 100% height: 100vh; background-image: url(./../img/footer2.jpg); background-size: cover; background-position: center;}
body > footer p {margin: 0px; padding: 0px; color: #FFFFFF; font-size: 0.5em; font-weight: 600;  line-height: 1.5;}
