/* -----------------------------------------------------------
CSS Information

File name:      common.css
Created:        2021-1
Style Info:     コモンCSS
----------------------------------------------------------- */
/* ------------------------------------ */
/* reset */
/* ------------------------------------ */
*,*::before,*::after {
  box-sizing : border-box;
} 
html,body {
  margin : 0;
  padding : 0;
  line-height : 0;
  letter-spacing : 0;
}  
img {
  border : 0;
  font-size : 0;
  height : auto;
  max-width : 100%;
  vertical-align : bottom;
  backface-visibility : hidden;
}
h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,li,img,th,td {
  margin : 0;
  padding : 0;
  border : 0;
  outline : 0;
  font-weight : normal;
  font-size : 100%;
  background : transparent;
}
li {
  list-style : none;
}
table {
  border-collapse : collapse;
  border-spacing : 0;
}
tbody {
  vertical-align : inherit;
}
a {
  display : block;
  color : #000;
  text-decoration : none;
}
/* ------------------------------------ */
/* common */
/* ------------------------------------ */
body {
  -moz-osx-font-smoothing : grayscale;
  -webkit-font-smoothing : antialiased;
  background : #ececec;
  color : #000;
  font-family : 'Meiryo','メイリオ', 'Hiragino Maru Gothic ProN W4', 'ヒラギノ丸ゴ ProN W4', sans-serif;
  font-weight : 400;
  line-height : 1.7 ;
}
/*font*/
@font-face {
  font-family : 'hiramaru2';
  font-style : normal;
  font-weight : 400;
  src : url('../font/hiramaru_r.woff') format('woff');
}
html {
  font-size : 62.5%;
}
/* layout */
.inner {
  max-width : 100%;
  width : 1024px;
  margin : 0 auto;
}
.wrapper  .inner {
  display : flex;
  padding-top : 2.6%;
  padding-bottom : 2.3%;
}
.heading_wrapper {
  position : absolute;
}
a:not(.phone) {
  transition : all .3s ease 0s;
}
a:hover:not(.phone) {
  opacity : .6;
}
.phone {
  cursor : default;
}
/* ------------------------------------ */
/* header */
/* ------------------------------------ */
#header {
  line-height : 1.5;
}
.header_logo {
  width : 49.72%;
}
.header_inner {
  display : flex;
  justify-content : space-between;
  padding : 1% 0 1% 0;
  align-items : center;
}
.fixed_drawer {
  width : 100%;
}
.contact_info {
  text-align : right;
  padding-right : 2%;
}
.address {
  font-family : 'hiramaru_r', sans-serif;
  font-size : 1.3rem;
}
.phone {
  font-family : Arial, sans-serif;
  font-size : 2.6rem;
  font-weight : bold;
  color : #f00;
  padding-right : 1.8%;
}
.phone::before {
  content : url(../img/common/phone_icon.png);
  margin-right : 2%;
  background : no-repeat;
}
.mail {
  width : 31.1%;
  margin-left : auto;
}
.gnav_list {
  display : flex;
  padding-left : 8.3%;
}
.gnav_item a {
  font-family : 'hiramaru_r', sans-serif;
  font-size : 1.3rem;
}
.gnav_item + .gnav_item {
  margin-left : 3.4%;
}
.show_sidebar {
  display : none;
  opacity : 0;
}
.current {
  border-bottom : solid 5px #f00;
}
.current a {
  color : #f00;
  font-weight : bold;
}
.gnav_sp {
  display : none;
}
.drawer_btn .open,.drawer_btn .close {
  display : none;
}
.bg {
  display : none;
}
/* ------------------------------------ */
/* main */
/* ------------------------------------ */
main {
  order : 1;
}
/* ------------------------------------ */
/* sidebar */
/* ------------------------------------ */
aside {
  width : 20.6%;
  margin-left : 4.8%;
}
.sidebar_item:not(:last-child) {
  margin-bottom : 7%;
}
/* ------------------------------------ */
/* footer */
/* ------------------------------------ */
.copyright {
  font-size : 1.2rem;
  color : #4d4d4d;
  text-align : center;
  padding : 2.4% 0;
  border-top : solid 5px #f00;
}
@media screen and (max-width: 1024px) {
  .inner {
    width : 100%;
    padding-left : 4%;
    padding-right : 4%;
  }
  #footer .inner {
    padding : 0;
  }
}
@media screen and (max-width: 599px) {
  /*common,layout*/
  html {
    font-size : 72%;
    scroll-padding-top : 15%;
  }
  .wrapper .inner {
    flex-direction : column-reverse;
  }
  a:hover:not(.phone) {
    opacity : 1;
  }
  /* ------------------------------------ */
  /* header */
  /* ------------------------------------ */
  #header {
    position : relative;
    top : 0;
    left : 0;
    width : 100%;
    background : #ececec;
    z-index : 9999;
  }
  .js_fix_wrapper {
    position : relative;
  }
  .header_inner {
    flex-flow : column;
    justify-content : inherit;
    align-items : inherit;
    padding : 0;
  }
  .header_logo {
    margin : 1% 3%;
    width : 30%;
  }
  .contact_info {
    padding : 0;
    margin-left : auto;
  }
  .phone::before {
    content : url(../img/common/phone_icon_w.png);
    margin-right : 2%;
    background : no-repeat;
  }
  .phone {
    color : #fff;
    padding-right : 0;
    width : 70%;
    margin-left : auto;
  }
  .phone::before {
    vertical-align : unset;
  }
  .address,.mail {
    display : none;
  }
  .gnav_pc {
    display : none;
  }
  .fixed_drawer {
    position : relative;
    display : block;
    background : #f7931e;
    padding : 3.5% 4%;
    box-shadow : 0 2px 2px rgba(0,0,0,.2);
  }
  .drawer_btn {
    display : block;
    position : absolute;
    width : 10%;
    height : 57%;
    cursor : pointer;
  }
  .drawer_btn a {
    position : relative;
    display : block;
    top : 6%;
    height : 50%;
  }
  .drawer_btn span {
    position : absolute;
    display : inline-block;
    left : 0;
    width : 100%;
    height : 3px;
    background : #fff;
    border-radius : 1em;
    -webkit-transition : all .4s;
            transition : all .4s;
    box-sizing : border-box;
  }
  .drawer_btn span:nth-of-type(2)::after {
    position : absolute;
    top : 0;
    left : 0;
    content : '';
    width : 100%;
    height : 100%;
    background : #fff;
    border-radius : 24px;
    -webkit-transition : all .4s;
            transition : all .4s;
  }
  .drawer_btn span:nth-of-type(1) {
    top : 0;
  }
  .drawer_btn span:nth-of-type(2) {
    top : 45%;
  }
  .drawer_btn span:nth-of-type(3) {
    bottom : 0;
  }
  .drawer_btn .active span:nth-of-type(2) {
    -webkit-transform : rotate(-45deg);
        -ms-transform : rotate(-45deg);
            transform : rotate(-45deg);
  }
  .drawer_btn .active span:nth-of-type(2)::after {
    -webkit-transform : rotate(90deg);
        -ms-transform : rotate(90deg);
            transform : rotate(90deg);
  }
  .drawer_btn .active span:nth-of-type(1) {
    -webkit-transform : translateY(20px) scale(0);
        -ms-transform : translateY(20px) scale(0);
            transform : translateY(20px) scale(0);
  }
  .drawer_btn .active span:nth-of-type(3) {
    -webkit-transform : translateY(-20px) scale(0);
        -ms-transform : translateY(-20px) scale(0);
            transform : translateY(-20px) scale(0);
  }
  .drawer_btn .open,.drawer_btn .close {
    background : transparent;
    color : #fff;
    font-family : Arial, sans-serif;
    font-weight : bold;
    font-size : 1.6rem;
    bottom : -40%;
    text-align : center;
  }
  .drawer_btn .open,.drawer_btn .close {
    display : block;
  }
  .drawer_btn .active .close {
    display : block;
  }
  .drawer_btn .close,.drawer_btn .active .open {
    display : none;
  }
  .is_fixed {
    position : fixed;
    top : 0;
    left : 0;
    z-index : 9999;
    width : 100%;
    padding : 3.5% 4%;
  }
  .bg {
    z-index : 0;
    position : absolute;
    width : 100%;
    height : 100vh;
    display : block;
    z-index : 10;
    top : 100%;
    left : 0;
    background : rgba(247, 147, 30, .9);
    transition : transform .3s ease-in-out;
    transform : translateX(-950px);
  }
  .move_to_left {
    transform : translateX(0px);
  }
  .gnav_sp {
    display : block;
    text-align : center;
  }
  .show_sidebar {
    display : block;
  }
  .gnav_sp .gnav_list {
    flex-direction : column;
    padding : 0;
  }
  .gnav_sp .gnav_list,.gnav_sp .gnav_item {
    z-index : 9999;
    margin : 0;
  }
  .current {
    border-bottom : transparent;
  }
  .current a {
    color : transparent;
    font-weight : normal;
  }
  .gnav_sp .gnav_item a {
    color : #fff;
    margin : 0;
    line-height : 11vh;
    border-top : 1px solid #fff;
    font-size : 1.8rem;
  }
  /* ------------------------------------ */
  /* aside */
  /* ------------------------------------ */
  aside {
    width : 100%;
    margin-left : 0;
    margin : 5.5% 0 0;
  }
  .sidebar_list {
    display : flex;
    justify-content : center;
    width : 100%;
    flex-wrap : wrap;
  }
  .sidebar_item {
    width : 47%;
  }
  .sidebar_item:not(:last-child) {
    margin-bottom : 0;
  }
  .sidebar_item:nth-child(odd) {
    margin-right : 3%;
    margin-bottom : 3%;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size : 63%;
  }
}