@charset "UTF-8";

/*
以下を入力しましょう。
Theme Name: Portfolio
Theme URI: https://github.com/tidythemes/blankslate
Author: Your Name
Description: ポートフォリオサイトのテーマです。
Version: 2021
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
*/


/* main */


/* 全要素に対して適用 */

* {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 16px;
}


/* 全ファイルに対して適用 */

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    color: #0367a6;
}


/* single.htmlのarticleに対してのページレイアウトの指定 */

article {
    width: 950px;
    margin: 30px auto;
}




/* 全ファイルに対して適用 */

main {
    padding-bottom:0px;
    width: auto;
}


/* 全ファイルに対して適用 */




/* displayは要素の表示形式を決める。ここでは並列 */

.flex {
    display: flex;
}


/* index.htmlのブログエリアの幅を指定 */

.inner {
    width: 100%;
    margin: 0 auto;
}


/* contact.htmlのフォームエリアの幅を指定、中央 */


/* box-sizingはpaddingとborderを含め、marginを含めず、中身のサイズを調整するのでレスポンシブする際に設定しておくと良い */

.sm-inner {

    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding-bottom: 130px;
}


/* 文字色 */

.note {
    color: #ce8d8d;
    font-size: 12px;
}


/* 箇条書きのリストマークなし */

ul {
    list-style: none;
}


/* a タグの画像にホバーしたとき0～1の間で透過させる */

a img:hover {
    opacity: .7;
}


/* emは相対指定0.1emは文字の高さの1/10の文字間 */

p {
    letter-spacing: 0.1em;
}


/* index.htmlファイルの一覧ページボタンにマウスオーバーした時のボタン色を変化させる */


/* transition（時間的変化）: all .4s（すべて0.4秒で変化） ease（開始と完了を滑らかにする）; */

.btn {
    border: 1px solid #7b95a6;
    border-radius: 35px;
    transition: all .4s ease;
    width: 310px;
    margin: 60px auto 30px;
}

.btn:hover {
    background: #022873;
}


/* index.htmlファイルの一覧ページボタンにマウスオーバーした時のボタン内の文字色を変化させる */

.btn a {
    color: #53705e;
    text-decoration: none;
    display: block;
    padding: 15px 28px;
    font-size: 19px;
    text-align: center;
}

.btn a:hover {
    color: #fff;
}


/* header */


/* headerの高さとpositionをrelative（相対位置）に指定 */

header .pc_hd{
    height: 875px;
    position: relative;
}


/* contact.htmlのheaderの高さ */

header .mb_hd {
    height: 270px;
    position: relative;
}


/* single.htmlのheaderの高さ */

header.single-hd {
    height: 90px;
}


.sub-black{
    height: 200px!important;
    position: relative;

}

/* breadcrumbs(パンくずリスト) のスタイルのみ設定、パンくずリスト自体はプラグインから出力*/

.breadcrumbs {
    background: #9fa39d;
    color: #fff;
    width: 100%;
    padding: 3px 0;
    margin-top: 200px;
}

.breadcrumbs * {
    font-size: 14px;
}

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
}

.aioseo-breadcrumb-separator {
    display: inline-block;
    margin: 0 10px;
}

.aioseo-breadcrumbs {
    overflow: auto;
}

@media screen and (max-width: 768px) {
    .aioseo-breadcrumbs {
        width: 950px;
        margin: 0 auto;
        overflow: hidden;
    }
}


/* ::beforeで疑似要素をだしており、htmlタグで確認すると画像とタイトルの間を指している */

.black::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 875px;
    background: rgba(250, 248, 248, 0.2);
}


/*HTMLとCSSを構築している際はCSSから見ての階層でよいが、WordPressにアップした場合は階層が変わる為、パスの変更が必要 */


/* background-attachment: fixedはスクロールした際に画像を動かさない */

.black {
    background: url(images/main.png) center top no-repeat;
    background-size: cover;
    height: 875px;
    position: relative;
    background-attachment: fixed;
}


/* contact.htmlファイル */

.sub-black::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 270px;
    background: rgba(0, 0, 0, .2);
}

.sub-black {
    background: url(images/header_bg.jpg) center top no-repeat;
    background-size: cover;
    height: 270px;
    position: relative;
}


/* header内のh1タイトル */

header h1 {
    font-size: 45px;
    letter-spacing: 0.3em;
}


/* header内のpタグ */

header p {
    font-size: 18px;
    padding-top: 20px;
    letter-spacing: 0.3em;
}

 .explanation p {
    text-align: right;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: #dcdcdc;
    height: 50px;
  }



/* transform（回転・移動・拡大縮小させることができる）: translate(-50%, -50%);（右方向、下方向の移動距離） */

.title {
    position: absolute;
    top: 55%;
    left: 50%;
    color: #022873;
    text-align: center;
    transform: translate(-50%, -50%);
}

.sub-black .title {
    top: 62%;
}


/* ハンバーガーメニュー */


/* 3本線を入れる箱 z-index: 3;（数字が大きいのが上 ）*/

#menu .btn-gnav {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 400ms;
    background:#fff;
}


/* 3本線 */

#menu .btn-gnav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #022873;
    border-radius: 10px;
    transition: all 400ms;
}


/* ハンバーガーメニューの1本・2本・3本のレイアウト */

#menu .btn-gnav span:nth-child(1) {
    top: 0;
}

#menu .btn-gnav span:nth-child(2) {
    top: 10px;
}

#menu .btn-gnav span:nth-child(3) {
    top: 20px;
}


/* ハンバーガーメニューの1本・2本・3本のレイアウト */


/* 1本目は-45度の斜線に変化 */

#menu .btn-gnav.open span:nth-child(1) {
    background: #022873;
    top: 6px;
    transform: rotate(-45deg);
}


/* 2・3本目は45度の斜線に変化 */

#menu .btn-gnav.open span:nth-child(2),
#menu .btn-gnav.open span:nth-child(3) {
    top: 6px;
    background: #022873;
    transform: rotate(45deg);
}


/* ハンバーガーメニューここまで */


/* ハンバーガーメニューを押して開いたメニュー */


/* メニューの表示された100％の大きさでそのまま右側ずれる（100%） */


/* fixed絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなる */


/* transition: .3sはアニメーションのスピード */

#gnav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2;
    padding-top: 50px;
    transition: .3s;
}


/* スペース開いてないから同階層 */


/* openしたらメニューが見える場所に来る */

#gnav.open {
    right: 0px;
}


/* メニューのレイアウト */

.gnav-menu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.gnav-menu li {
    display: block;
    padding: 20px 30px;
}

.gnav-menu li a {
    color: #9fa39d;
    text-decoration: none;
    font-weight: 100;
}

.gnav-menu li a:hover {
    opacity: .7;
}


/* ロゴのレイアウトとスタイル */

.logo {
    position: fixed;
    z-index: 6;
    padding-left: 10px;
    left: 0%;
    margin-top: -10px;
}

.logo p a {
    text-decoration: none;
    color: #57715d;
    font-size: 45px;
    font-weight: 100;
}

.logo p a:hover {
    opacity: .7;
}


/* ロゴのレイアウトとスタイル */


/* 幅が600px以上になったら（パソコンで見たときのメニューレイアウト） */

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

    #sec05 table {
        width: 90%;
        background: #dcdcdc;
    
       
    }

    #sec05 form{
        width: 90%;

    }

    #profile-sec1 table{

    width: 60%;
    
    }

    #menu {
        width: 100%;
       
        z-index: 5;
        background: #dcdcdc;
        height: 70px;
    }
    .btn-gnav {
        display: none;
    }
    #gnav {
        position: fixed;
        top: 0;
        height: 90px;
        right: 0%;
        background: #dcdcdc
    }
    #gnav .gnav-menu {
        display: flex;
        flex-direction: row;
        justify-content: end;
        height: 100%;
        margin-top: -15px;
    }
    #gnav .gnav-menu li {
        padding-top: 5px;
    }

    #sec02 .btn{display: none;}
}


/* パソコン表示ここまで */

.sm-inner p {
    font-size: 14px;
    padding-bottom: 14px;
}

.fixed_btn {
    position: sticky; /* 追従させる為にfixedの値を記述します */
    z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
    top: 150px; /* 上から150pxのところにバナーを配置します */
    right: 0px; /* 右から40pxのところにバナーを配置します */
    background-color: transparent;
    border:0;
    }
    

/* section01 */

#sec01 {
    padding: 185px 0;
}

.inner>h2,
.sm-inner>h2 {
    text-align: center;
    padding-top: 120px;
    margin-bottom: 150px;
    font-size: 31px;
    font-weight: 300;
    position: relative;
    color: #57715d;
    letter-spacing: 0.3em;
}

.inner>h2 span,
.sm-inner>h2 span {
    font-size: 19px;
    display: block;
    letter-spacing: 0.1em;
}

.inner>h2::after,
.sm-inner>h2::after {
    position: absolute;
    top: calc( 100% + 15px);
    left: 50%;
    margin-left: -50px;
    content: '';
    width: 100px;
    height: 1px;
    background: #9fa39d;
}

#sec01 .flex {
    justify-content: space-between;
    flex-wrap: wrap;
}

#sec01 .box {
    width: 80%;
    padding-bottom: 15px;
    padding-left: 400px;
    box-sizing: border-box;
}

#sec01 .box time {
    text-align: justify;
    letter-spacing: 0.1em;
    font-size: 20px;
}

#sec01 .box p a {
    text-decoration: none;
    color: #57715d;
    font-size: 20px;
}

#sec01 .box a img {
    width: 265px;
    height: 265px;
}

#sec01 .box p a:hover {
    text-decoration: underline;
}


/* sec02 */

#sec02 {
    background: #dcdcdc;
    padding: 100px 0 30px;
}

#sec02 .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    
}



#sec02  .contents{
    width: 400px;
}

.inner h4 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
    color: #57715d;
}

.sec02-bx {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.sec02-bx.right-tx {
    padding-left: 10px;
}

.sec02-bx.left-tx {
    padding-right: 10px;
}

.sec02-bx h3 {
    font-size: 38px;
    margin-bottom: 30px;
}

.sec02-bx p {
    font-size: 18px;
    margin-bottom: 24px;
}

.sec02-bx:nth-of-type(4) {
    text-align: right;
}

/* sec04 */

#sec04 {
    background: #f2f7ef;
    padding: 100px 0 30px;
}

#sec04 .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    
}



#sec04-bx  .contents{
    width: 200px;
}

.sec04-bx {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.sec04-bx.right-tx {
    padding-left: 10px;
}

.sec04-bx.left-tx {
    padding-right: 10px;
}

.sec04-bx h3 {
    font-size: 38px;
    margin-bottom: 30px;
}

.sec04-bx p {
    font-size: 18px;
    margin-bottom: 24px;
}

.sec04-bx:nth-of-type(4) {
    text-align: right;
}

.sec04-contents{
    width: 580px;
}
.sec04-bx img{
    width: 100%;
}

/* sec03 */

#sec03 {
    padding: 120px 0;
    background-color: #dcdcdc;
}

#sec03 .prf-bx {
    width: 50%;
    box-sizing: border-box;
    padding-right: 60px;
}

#sec03 .prf-bx h3 {
    font-size: 28px;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
}

#sec03 .prf-bx h3 span {
    font-size: 20px;
}

#sec03 .prf-bx p {
    margin-bottom: 24px;
    font-size: 18px;
}
#sec03 .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto 60px;  
}


#sec03 .prf-sns i{
    font-size: 60px;
}

/* sec06 */

#sec06 {
    background: #f2f7ef;
    padding: 100px 0 50px;
}

#sec06 .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 200px;
    
}



#sec06-bx  .contents{
    width: 200px;
}

.sec06-bx {
    width: 50%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.sec06-bx.right-tx {
    padding-left: 10px;
}

.sec06-bx.left-tx {
    padding-right: 10px;
    width: 40%;
}

.sec06-bx h3 {
    font-size: 38px;
    margin-bottom: 30px;
}

.sec06-bx h4 {
    font-size: 24px;
    margin-bottom: 24px;
}


.sec06-bx p {
    font-size: 20px;
    margin-bottom: 24px;
}

.sec06-bx:nth-of-type(4) {
    text-align: right;
}

.sec06-contents{
    width: 580px;
}
.sec06-bx img{
    width: 100%;
}


/* sec05 */

#sec05 {
    padding: 0px 0;
    background-color: #dcdcdc;
}

#sec05 .prf-bx {
    width: 50%;
    box-sizing: border-box;
    padding-right: 60px;
}

#sec05 .prf-bx h3 {
    font-size: 28px;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
}

#sec05 .prf-bx h3 span {
    font-size: 20px;
}

#sec05 .prf-bx p {
    margin-bottom: 24px;
    font-size: 14px;
}

#sec05 form{
    width: 900px;
    margin: 0 auto;
}   
#sec05 table{
    width: 800px;

}

#sec05 table td{
    border-bottom: 0px;

}






/* profile-sec1 */



#profile-sec1 h2 {
    text-align: center;
    margin-bottom: 150px;
    font-size: 31px;
    font-weight: 300;
    position: relative;
    color: #57715d;
    letter-spacing: 0.3em;
}

#profile-sec1 table th,td {
    border-bottom: 2px solid #7b85a6;
    font-size: 30px;
  }
  
  .txcenter>h2::after,
  .txcenter>h2::after {
      position: absolute;
      top: calc( 100% + 15px);
      left: 50%;
      margin-left: -50px;
      content: '';
      width: 100px;
      height: 1px;
      background: #9fa39d;
  }
  
  

#profile-sec1 .container {
    width: 100%;
    box-sizing: border-box;
    padding-right: 0px;
    text-align:left;
    padding-bottom: 200px;
    
}
#profile-sec1.container h2 span,
.container h2 span {
    font-size: 19px;
    display: block;
    letter-spacing: 0.1em;
}

#profile-sec1 .container h2::after {
    position: absolute;
    top: calc( 100% + 15px);
    left: 50%;
    margin-left: -50px;
    content: '';
    width: 100px;
    height: 1px;
    background: #9fa39d;
}

.company-pro{
    width: 800px;
    margin: 0 auto;
}


.prf-sns {}

.prf-sns p {
    letter-spacing: 0.8em;
}

.prf-sns p a {
    color: #8c9d90;
}

.prf-sns p a .
fab {
    font-size: 27px;
}


/* Price */

#sec07 .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px auto;
    width: 90%;

}

#sec07 .right-tx p {
    font-size: 16px;
    padding-bottom: 10px;
}

#sec07 .box-1{
    height: 350px;
}

#sec07 .I1-h4{
    margin-top: 35px;
}


#sec07 .I2-h4{
    margin-top: 25px;
}


#sec07 .I3-h4{
    margin: 35px;
}

#sec07 .right-tx ul {
    font-size: 18px;
    padding-bottom: 40px;
    padding-top: 20px;
}

#sec07 .right-tx h3 {
    font-size: 24px;
    padding-bottom: 30px;
}

#sec07 .right-tx h4 {
    font-size: 24px;
    padding-bottom: 30px;
}



#sec07 .Items-1{
    border: 3px solid var(--accent-500, #0090ff);
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    margin-bottom: 10px;
}

#sec07 .Items-2{
    border: 3px solid var(--accent-500, #0090ff);
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    margin-bottom: 10px;
    
}
#sec07 .Items-3{
    border: 3px solid var(--accent-500, #0090ff);
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    margin-bottom: 10px;
    
}





input[type="text"],
input[type="email"] {
    width: 85%;
    padding: 18px 20px;
    border: 1px solid #9fa39d;
}

textarea {
    width: 85%;
    padding: 15px 20px;
    height: 220px;
    border: 1px solid #9fa39d;
}

::placeholder {
    color: #b5b5b5;
}

input[type="submit"] {
    border: none;
    border-radius: 35px;
    margin-top: 60px;
    transition: all .4s ease;
    width: 310px;
    padding: 15px 30px;
    font-size: 19px;
    text-align: center;
    color: #fff;
    background: #8c9d90;
}

input[type="submit"]:hover {
    background: #53705e;
}


/* footer */

footer {
    background: #9fa39d;
    padding: 60px 0;
    color: #fff;
    font-size: 14px;
    position: relative;
    min-height: 250px;
    letter-spacing: 0.2em;
}

footer nav .flex {
    justify-content: center;
}

footer nav li {
    margin: 0 20px;
    font-size: 16px;
}

footer nav li a {
    text-decoration: none;
    color: #fff;
    transition: all .2s ease;
    font-size: 18px;
    font-weight: 100;
}

footer nav li a:hover {
    opacity: .7;
}

.copy {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, -50%);
    font-weight: 100;
}

.totop {
    width: 50px;
    position: fixed;
    bottom: 50px;
    right: 12%;
}

.totop a .fas {
    color: #6a6d68;
    font-size: 59px;
}


/* single */

h1.entry-title {
    font-size: 33px;
    letter-spacing: 0.2em;
    line-height: 1.5;
    color: #193110;
    font-weight: 500;
    text-align: justify;
}

.entry-meta {
    border-top: 1px solid #daddd9;
    border-bottom: 1px solid #daddd9;
    box-sizing: border-box;
    margin: 20px 0 30px;
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.entry-meta * {
    font-size: 14px;
    color: #9fa39d;
    text-decoration: none;
    letter-spacing: 0.2em;
}

.entry-meta div {
    margin-right: 30px;
}

.entry-meta div:nth-of-type(3) {
    margin-right: 0;
}

.meta-tag span {
    margin-right: 14px;
}

.meta-tag span:last-of-type {
    margin-right: 0;
}

.post-ct * {
    font-size: 14px;
    color: #9fa39d;
    box-sizing: border-box;
}

.post-ct {
    width: 100%;
    padding: 0 15px 60px;
    box-sizing: border-box;
}

.post-ct h2 {
    padding: 30px 0 20px;
}

.post-ct h2,
.post-ct h2 span {
    font-size: 29px;
    color: #57715d;
    letter-spacing: 0.1em;
}

.post-ct h3 {
    padding: 30px 0 10px 12%;
    position: relative;
}

.post-ct h3:before {
    position: absolute;
    top: 50px;
    left: 0;
    width: 11%;
    height: 1px;
    content: "";
    background: #9fa39d;
}

.post-ct h3,
.post-ct h3 span {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.post-ct p {
    padding: 10px 0;
    line-height: 1.6;
    text-align: justify;
}

.post-ct p strong,
.post-ct p strong b {
    font-weight: 500;
    color: #465640;
}

.post-ct ul {
    margin: 20px 0 30px;
    padding: 0 10px;
    line-height: 2;
    letter-spacing: 0.1em;
}

.post-ct ul * {
    color: #a3b1a7;
}

.post-ct ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    content: "\f00c";
    padding-right: 15px;
}

.post-ct table {
    border-top: 5px solid #9fa39d;
    border-left: 1px solid #9fa39d;
    border-right: 1px solid #9fa39d;
    border-bottom: 1px solid #9fa39d;
    border-collapse: collapse;
    width: 100%;
    overflow-x: scroll;
    margin: 30px 0;
}

.post-ct table * {
    color: #a3b1a7;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.post-ct table th,
.post-ct table td {
    border: 1px solid #9fa39d;
    padding: 15px;
}

.post-ct table th {
    font-weight: 500;
    text-align: center;
    min-width: 30%;
}

.post-ct a {
    color: #5a9264;
    text-decoration: underline;
}

.post-ct a:hover {
    text-decoration: none;
}


/* toc+ */

#toc_container {
    border-top: 1px solid #daddd9;
    border-bottom: 1px solid #daddd9;
    width: 100%;
    padding: 15px 30px 30px;
    margin: 35px 0;
}

p.toc_title {
    text-align: center;
    padding: 0;
    font-size: 18px;
    letter-spacing: 0.3em;
}

ul.toc_list {
    margin: 40px 0 20px;
    line-height: 1.8;
    padding: 0;
    letter-spacing: 0;
}

ul.toc_list ul {
    margin: 0 0 14px 28px;
    padding: 0;
    line-height: 1.8;
    letter-spacing: 0;
}

ul.toc_list li a {
    color: #5a9264;
    text-decoration: none;
}

ul.toc_list li::before {
    content: none;
}

ul.toc_list li a:hover {
    text-decoration: underline;
}

.prev-next {
    margin: 50px 0;
    display: flex;
}

.prev,
.next {
    margin: 5px 0;
    padding: 18px 40px;
    width: 50%;
    position: relative;
    box-sizing: border-box;
}

.prev a,
.next a {
    color: #9fa39d;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.prev a:hover,
.next a:hover {
    text-decoration: underline;
}

.next {
    text-align: right;
}

.next:after {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    position: absolute;
    right: 12px;
    top: 40%;
    color: #9fa39d;
    font-size: 14px;
}

.prev:after {
    content: "\f100";
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    position: absolute;
    left: 12px;
    top: 40%;
    color: #9fa39d;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .inner {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #sec01 .flex {
        flex-wrap: wrap;
    }
    #sec01 .box {
        width: 49%;
        margin-bottom: 20px;
        font-size: 24px;
    }
    
    #sec02 .text_block {
        width: 100%;
        padding: 100px 0;
        text-align: center;
    }
}

@media (max-width: 640px) {

    .inner h4 {
        font-size: 21px;
        margin-bottom: 15px;
        text-align: center;
    }


    #profile-sec1 h2 {
    text-align: center;
  margin-bottom: 150px;
  font-size: 31px;
  font-weight: 300;
  position: relative;
  color:#57715d;
  letter-spacing: 0.3em;
  padding-top: 50px;
    }
    #sec01 {
        padding: 50px 0;
    }

    .sm-inner > h2 {
        text-align: center;
        padding-top: 120px;
        margin-bottom: 150px;
        font-size: 24px;
        font-weight: 300;
        position: relative;
        color: #57715d;
        letter-spacing: 0.3em;
      }

    .explanation p {
        text-align: right;
        font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        background: #dcdcdc;
        height: 50px;
        font-size: 11px;
      }

    #sec04 .flex {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
      }

    #sec06 .flex {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 0px;
      }

    .sec06-bx h3 {
        font-size: 25px;
        margin-bottom: 20px;
      }

      .sec06-bx h4 {
        font-size: 20px;
        margin-bottom: 20px;
      }

      .sec06-bx p {
        font-size: 18px;
        margin-bottom: 18px;
      }

    .sec04-bx h3 {
        font-size: 25px;
        margin-bottom: 15px;
      }
  

    input[type="submit"] {
        border: none;
        border-radius: 35px;
        margin: 60px auto 30px;
        transition: all .4s ease;
        width: 200px;
        padding: 15px 30px;
        font-size: 19px;
        text-align: center;
        color: #fff;
        background: #8c9d90;
        display: block;
    }
    

    #sec07 .Items-2{
        height: 485px;
    }

    article {
        width: 100%;
        margin: 0 auto 30px;
    }
    img {
        width: 40%;
        height: auto;
    }
    .btn {
        width: 70%;
    }
    .btn a {
        font-size: 16px;
    }
    .inner>h2 {
        margin-bottom: 60px;
        font-size: 25px;
    }
    .sm-inner {
        width: 100%;
        padding: 0 15px;
    }
    .logo {
        position: absolute;
        z-index: 5;
        left: 10px;
        top: -50px;
    }
    .logo p a {
        font-size: 21px;
    }
    header .mb-hd{
        margin-top: 60px;
        height: 100%;
    }
    header.single-hd {
        height: auto;
    }
    header.single-hd #menu .btn-gnav {
        position: absolute;
        top: -40px;
    }
    .breadcrumbs {
        padding: 3px 10px;
        height: 26px;
        overflow-x: auto;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .breadcrumbs * {
        font-size: 12px;
    }
    .title {
        top: 50%;
        width: 90%;
    }
    .title h1 {
        font-size: 21px;
    }
    header p {
        font-size: 12px;
    }

    .black{
        background: url(images/mobmain.png) center top no-repeat;
        background-attachment: scroll;
        background-size: 1500px;
      height: 875px;
      position: relative;
      background-attachment: fixed;
    }

    .black,
    .black::before {
        height: 100vh;
    }
    h1.entry-title {
        font-size: 24px;
        padding: 0 10px;
        letter-spacing: 0.1em;
    }
    .entry-meta {
        justify-content: start;
        white-space: nowrap;
        overflow-y: scroll;
        padding: 8px 10px;
    }
    .entry-meta div {
        margin-right: 15px;
    }
    .entry-meta * {
        font-size: 12px;
    }
    .post-ct h2,
    .post-ct h2 span {
        font-size: 21px;
    }
    .post-ct h3,
    .post-ct h3 span {
        font-size: 18px;
    }
    .post-ct table th {

        text-align: left;
    }
    .prev-next {
        display: inherit;
        margin: 0;
    }
    .prev,
    .next {
        padding: 18px 35px;
        width: 100%;
    }
    .sub-black,
    .sub-black::before {
        height: 270px !important;
    }
    header.page-hd {
        height: 150px;
    }
    .sub-black .title {
        top: 50%;
    }
    #sec01 .box p {
        letter-spacing: 0;
        font-size: 12px;
    }
    #sec01 .box a img {
        height: 65%;
        width: 200px;
    }
    .sec02-bx {
        width: 100%;
        margin-bottom: 30px;
    }
    .sec02-bx h3 {
        font-size: 23px;
        margin-bottom: 15px;
    }
    .sec02-bx:nth-of-type(1) {
        order: 1;
    }
    .sec02-bx:nth-of-type(2) {
        order: 2;
        margin-bottom: 60px;
    }
    .sec02-bx:nth-of-type(3) {
        order: 4;
        margin-bottom: 60px;
    }
    .sec02-bx:nth-of-type(4) {
        order: 3;
    }
    .sec02-bx.right-tx,
    .sec02-bx.left-tx {
        padding: 0;
    }
    #sec03 .inner {
        padding: 0;
    }
    #sec03 .flex {
        flex-wrap: wrap;
    }
    #sec03 .prf-bx {
        width: 100%;
        padding: 30px 15px;
        order: 2;
    }
    #sec03 .prf-bx h3 {
        font-size: 16px;
    }
    #sec03 .prf-bx h3 span {
        font-size: 11px;
    }
    #sec03 .prf-photo {
        order: 1;
    }
    #sec03 .prf-sns {
        text-align: center;
    }
    table.inq {
        width: 100%;
    }
    table.inq th {
        font-size: 14px;
        padding: 10px 10px 10px 0;
    }
    table.inq th span {
        font-size: 12px;
    }
    table.inq td {
        padding: 10px 0;
    }
    input[type="text"],
    input[type="email"],
    textarea {
        width: 85%;
    }
    footer .flex {
        display: inherit;
    }
    footer ul {
        line-height: 1.8;
        text-align: center;
    }
    .copy {
        padding-top: 0;
        width: 100%;
    }
    #pagetop {
        bottom: 20px;
        right: 20px;
    }

   
}

#sec08 .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   
    margin: 0px auto;
}



/* search */

.list-pg {
    margin: 80px 0;
}

.lst-box {
    border-bottom: 1px solid #daddd9;
    text-align: left;
    clear: both;
    padding: 30px 0 0 50px;
    min-height: 240px;
    box-sizing: border-box;
}

.lst-box a img {
    float: left;
    padding-right: 20px;
}

.lst-box p.ttl a {
    font-size: 21px;
    color: #57715d;
    font-weight: 500;
    text-decoration: none;
}

.lst-box p.ttl a:hover {
    text-decoration: underline;
}

ul.page-numbers {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
}

ul.page-numbers .prev,
ul.page-numbers .next {
    padding: 5px 0;
    width: 100%;
}

ul.page-numbers li {
    box-sizing: border-box;
    padding: 0 10px;
}

ul.page-numbers .prev:after {
    top: 13px;
    left: -25px;
}

ul.page-numbers .next:after {
    top: 13px;
    right: -25px;
}

.inner>.sm-inner {
    margin: 30px auto;
}
@media screen and (max-width:768px) {

    #sec05 table {
        width: 90%;
        background: #dcdcdc;
        display:block;
    
       
    }

    #sec05 form{
        width: 90%;

    }

    #profile-sec1 table{

    width: 280px;
    display: block;
    margin: 0 auto;
  }
    

    #sec01 .box{
        width: 90%;
        margin: 0 auto;
        padding: 0px;
    }

    #sec06 .sec06-bx.left-tx{
        width: 80%;
        margin: 0px auto 90px;
    }
    #sec06 img{display:none;}

    #profile-sec1  table th ,td{
        font-size: 17px;
    }
    
    #sec02 .none{display:none;}

}