@charset "UTF-8";
/*
Theme Name:木造戸建て構造計算センター
Theme URI:
Description:木造戸建て構造計算センターの専用テンプレートです。
Author:koshimizu ayako
Version:1.0 20220506
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img{vertical-align: bottom;}

#content p{line-height: 1.75em;}

/* iphone リセット*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input, select, textarea{
    border: none;
    outline: none;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/********* base *********/

html{font-size: 62.5%; /* sets the base font to 10px for easier math */}

body{
	color: #000;
	font-size: 18px;
	font-size: 1.8rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
	line-height: 1.6;
}

body, table, input, textarea, select, option, h1, h2, h3, h4, h5, h6{
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

a{text-decoration: none;
    color: #000;}
a:hover{opacity: 0.8;}

.sp{display: none!important;}

img{
    max-width: 100%;
}
/* 旧WordPressインラインCSSの代替：width/height属性付き画像の縦横比を保つ */
:where(img[width][height]){height: auto;}

@media screen and (max-width: 768px){
    body{font-size: 1.6rem;}
    img{
        max-width: auto;
        width: 100%;
        vertical-align: bottom;}
	.sp{display: block!important;}
	.pc{display: none!important;}
    
}

/********* header *********/
header .inner{
    width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

header .logo {margin: 12px 0 18px;}

header .inner .mail,
header .inner .line{
    width: 206px;
    text-align: center;
    margin-right: 1px;
    font-size: 1.9rem;
    font-weight: bold;
}
header .inner .mail a,
header .inner .line a{
    width: 100%;
    padding: 18px 0 14px;    
    color: #fff;
    display: block;
}
header .inner .mail a {
    background: #003162;
}
header .inner .line a{
    background: #06C755
}


.menu-nav-container {
    background: #003162;
}
.menu-nav-container ul {
    display: flex;
    justify-content: center;
}
.menu-nav-container ul li{
    margin: 0 25px;}

.menu-nav-container ul li a{
    color: #fff;
    font-size: 1.8rem;
    padding: 26px 0 28px;
    display: block;
}


@media screen and (max-width:768px){
    header .inner{
        width: 100%;
    }
    header .logo{
        width: 280px;
        margin: 12px 0 10px 5px;        
    }
    .hr.df{
        display: none;
    }
    header .inner .mail,
    header .inner .line{
        width: 100%;
        font-size: 1.4rem;    
    }
    header .inner .mail a, 
    header .inner .line a {
        padding: 5px 0 3px;
        margin-bottom: 2px;
    }    
    header .sp{
        width: 60px;
        
    }
}

/********* footer *********/	
footer{
    background: #003162;
    text-align: center;
    padding: 35px 0 25px;
    color: #fff;
}
footer h1.logo {
    margin-bottom: 52px;
}
footer p {
    margin-bottom: 25px;
    line-height: 1.3;
}

@media screen and (max-width: 768px){
    footer{    padding: 15px 0 10px;}
    footer h1.logo {
        width: 80%;
        margin: 0 auto 30px;
    }
    
    footer .menu-nav-container ul{
        flex-wrap: wrap;
    }
    footer .menu-nav-container ul li{
        margin: 0 10px;
        display: inline-block;
    }
    footer .menu-nav-container ul li a{
        padding: 10px;    
    }
}


@media screen and (max-width: 768px){
    #nav-drawer {
      position: relative;
      margin-left: 0;
      text-align: center;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
      display: none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        margin-top: 5px;
        margin-right: 5px;
    }

    /*閉じる用の薄黒カバー*/
    #nav-close {
      display: none;/*はじめは隠しておく*/
      position: fixed;
      z-index: 9999;
      top: 0;/*全体に広がるように*/
      right: 0;
      width: 30%;
      height: 100%;
     /* background: black;*/
      opacity: 0;
      transition: .3s ease-in-out;
    }

    /*中身*/
    #nav-content {
      overflow: auto;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9990;/*最前面に*/
      width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
      /*max-width: 330px;最大幅（調整してください）*/
      height: 100%;
      background: #fff;/*背景色*/
      transition: .3s ease-in-out;/*滑らかに表示*/
      -webkit-transform: translateX(-105%);
      transform: translateX(-105%);/*左に隠しておく*/
    }

    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked~#nav-close {
      display: block;/*カバーを表示*/
      opacity: .5;
    }

    #nav-input:checked~#nav-content {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);/*中身を表示（右へスライド）*/
      box-shadow: 100px 0px 25px 20px rgba(0, 0, 0, .5);
      z-index: 9995;
    }
    #nav-content{background: #003162 url(img/close-bg.png) top right no-repeat;
    background-size: auto;}
    #nav-content-wrap {
        background: #fff;
        margin: 5% 12% 0 2%;
    }
    #nav-content-wrap ul{
        margin-bottom: 5%;
        flex-wrap: wrap;
        }
    #nav-content-wrap li{
        width: 100%;    
        border-bottom: 1px solid #EADBD1;
    }
    #nav-content-wrap .btn-wrap01 {
        background: #3BA6C8;
        border-radius: 50px;
        padding: 0 10%;
        margin-bottom: 5%;}

    #nav-content-wrap .btn-wrap02 {
        background: #8EAF29;
        border-radius: 50px;
        padding: 0 10%;
        margin-bottom: 5%;}

    #nav-content-wrap .btn-wrap01 img{width: 100%;}

    .hamburger-top {
      height: 40px;
      margin-top: 5px;
    }

    .menu-hamburger-menu-container li {
      float: none;
      font-size: 15px;
      padding: 10px 15px 10px 15px;
      list-style: none;
      text-align: left;
      border-bottom: dashed 1px #fedbf1;
    }

    .menu-hamburger-menu-container li:last-child {
      border: none;
    }

    .menu-hamburger-menu-container li a {
      text-decoration: none;
      color: #000;
    }

    .menu-hamburger-menu-container a:before {
      font-family: FontAwesome;
      content: "\f07b";
      color: #00bb80;/*アイコン色*/
      margin-right: 5px;
    }

    ul#menu-sp-nav li{
        color: #414141;
        font-size: 2.1rem;
    }

    ul#menu-sp-nav li span {
        display: block;
        font-size: 1.6rem;
        color: #8EAF29;
    }
    
    .fb03-inner {
        display: flex;
        padding: 8px 15px 5px 15px;
    }
}