@charset "UTF-8";

/* ======== BASIC ======== */
html {
  overflow-y:scroll !important;
}

body {
  margin:0 !important;
  padding:0 !important;
  font-family:Verdana, Helvetica, sans-serif !important;
  color:#333 !important;
  font-size:16px !important;
  background:#fff !important;
}

hr {
  margin-bottom:7px;
}

a {
  color:#4169e1;
  text-decoration:none;
}

a:hover {
  color:#6495ed;
  text-decoration:underline;
}


h1,h2{
  margin:0 !important;
}

/* Media Queries 769px以上 */
@media screen and (min-width: 769px){  
  #top {
    width:960px;
    margin:0 auto;
    background:#fff;
  }

  #header {  
    position:relative; 
    width:960px;
    padding-left:5px;
    padding-top:5px;
  }

  #contents {
    clear:both;
    width:960px;
    margin-top:10px;
    background:#fff;  
  }

  #main {
    float: left;
    width: 100%;
    padding: 0 10px 10px 10px;
    background:#fff;  
  }
  
  /*
  #menu{
    float:left;
    width:250px;
    margin-left : 10px;
  }*/
  
  #footer {
    position:relative;
    clear:both;
    width:960px;
  }  

  .pc{
    
  }

  .sp{
    display:none;
  }  
}

/* Media Queries 768px以下 */
@media screen and (max-width:768px){
  
  #top {
    width:100%;
    margin:0 auto;
    background:#fff;
  }

  #header {  
    width:100%;
    padding-left:5px;
    padding-top:5px;
  }

  #contents {
    clear:both;
    width:100%;
    margin-top:10px;
    background:#fff;  
  }

  #main {
    width:100%;
    padding: 10px;
    background:#fff;  
  }

  #menu{
    display:none;
  }

  #footer {
    position:relative;
    clear:both;
    width:100%;
  }
  
  .pc{
    display:none;
  }

  .sp{
    
  }
    
  body{
   /*
     For older smartphones
     word-wrap:break-word;
   */
  }
}

#contents:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
} 

/* ========HEADER CUSTOMIZE======== */
#header .tab_menu {
  position:absolute;  
  padding:0 !important;
  top:38px;
  -moz-top:30px;  
  left:193px;
}

/* IExのみ適用 */
@media all and (-ms-high-contrast: none) {
  #header .tab_menu {
    position:absolute;  
    padding:0 !important;
    top:37px;
    -moz-top:30px;  
    left:193px;
  }
  
  hr{
    margin-bottom:6px;
  }
}

/* FireFoxのみ適用 */
@-moz-document url-prefix() {
  #header .tab_menu {
    position:absolute;  
    padding:0 !important;
    top:37px;
    -moz-top:30px;  
    left:193px;
  }
  
  hr{
    margin-bottom:6px;
  }
}


#header .tab_sheet{
  padding:7px;
  border-radius:5px 5px 0 0;
  background-color:#1e90ff;
  color:#fff !important;  
}

#header .petitmonte {
  position:absolute;
  top:22px;
  left:170px;
}

#header .manabu {
  position:absolute;
  top:22px;
  left:652px;
}

#header .description {
  position:absolute;
  top:5px;
  left:193px;
}

/* ======== MAIN CUSTOMIZE ========= */
#main p{
  margin: 16px 0 16px 0;  
  word-break: break-all;
}

#main img {
  border:0;
  max-width: 100%;
  height:auto;
  width :auto;    
}  

#main h1{
  font-weight:bold;
  font-size:32px;
}

#main h2{
  font-weight:bold;
  font-size:20px;
  border-bottom:2px dotted #1e90ff;
  border-left:8px solid #1e90ff;
  padding:7px;
  margin-left:0px; 
}

#main h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.25rem;    
}

/* ======== Hamburger ========= */
/*
  参考元
  https://tech-dig.jp/hamburger-global-nav/
*/
  
.dig_global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 300px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 65px;
  background-color: #fff;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}

.dig_global-nav_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dig_global-nav_item {
  text-align: left;
  padding-left : 0 14px;  
  /*background: url(https://www.petitmonte.com/images/arrow.gif) no-repeat  16px 10px;*/
}

.dig_global-nav_item a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #111;
}

.dig_global-nav_item a:hover {
  background-color: #eee;
}

.dig_black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

/* 表示された時用のCSS */
.dig_nav-open .dig_global-nav {
  right: 0;
}

.dig_nav-open .dig_black-bg {
  opacity: .8;
  visibility: visible;
}

/*

  参考元
  https://zarigani-design-office.com/hamburger/
  
  ===============
  This hamburger button was generated by Zarigani Design Office Hamburger Button Generator.

  Zarigani Design Office's Hamburger Button
  Copyright: 2019 Zarigani Design Office
  URL: https://zarigani-design-office.com/hamburger/
  This software is released under the MIT License.
  http://opensource.org/licenses/mit-license.php
  ================
*/

/*+++ Reset +++*/
.zdo_drawer_button * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;arance: none;
  text-align: left;
  text-decoration: none;
  list-style: none
}

/* Media Queries 769px以上 */
/*@media screen and (min-width: 769px){
  .zdo_drawer_button {  
    display: block;
    padding: 0;
    width: 42px;
    height: 26px;
    position:fixed;
    right: 55px;
    top: 15px;
    background: none;
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
    z-index: 300; 
  }
}*/

/* Media Queries 768px以下 */
@media screen and (max-width:768px){
  .zdo_drawer_button {  
    display: block;
    padding: 0;
    width: 42px;
    height: 26px;
    /*position:fixed;*/
    position:absolute;
    right: 15px;
    background: none;
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
    z-index: 300; 
  }  
}

.zdo_drawer_button .zdo_drawer_bar {
  display: block;
  width: 42px;
  height: 2px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
}

.zdo_drawer_button .zdo_drawer_bar1 {
  top: 0;
}

.zdo_drawer_button .zdo_drawer_bar2 {
  top: 50%;
}

.zdo_drawer_button .zdo_drawer_bar3 {
  top: 100%;
}

.zdo_drawer_button.active .zdo_drawer_bar {
  width: 36.77px;
  left: 8px
}

.zdo_drawer_button.active .zdo_drawer_bar1 {
  transform: rotate(0.7853981633974483rad) translateY(-50%);
  top: 0px
}

.zdo_drawer_button.active .zdo_drawer_bar2 {
  opacity: 0;
}

.zdo_drawer_button.active .zdo_drawer_bar3 {
  transform: rotate(-0.7853981633974483rad) translateY(-50%);
  top: calc(100% - 0px)
}

.zdo_drawer_button.active .zdo_drawer_menu_text {
  display: none;
}

.zdo_drawer_button.active .zdo_drawer_close {
  display: block;
}

.zdo_drawer_text {
  width: 100%;
  position: absolute;
  bottom: -20px;
  left: 0;
  text-align: center;
  font-size: 10px;
  user-select: none;
}

.zdo_drawer_close {
  letter-spacing: 0.08em;
  display: none;
}

/*+++ Default Button Color +++*/
.zdo_drawer_button {
  color: #1e90ff;
}

.zdo_drawer_button .zdo_drawer_bar {
  background-color: #1e90ff;
}