@charset 'UTF-8';

/*
COLORS
================================================ */
:root {  
    --white: #FFFFFF;
    --text: #1F1E1F;/*本文文字基本色*/
    --bg: #FDF7F3; /*薄ベージュ、フッターのバック*/
    --grey: #7D7A7A; /*ヘッダーのバック、グレー*/
    --deep-bg: #DFDDD6;  /*ヘッダーの文字、濃ベージュ*/
    --light-blue: #4db1ec;
    --blue: #1665cc;
    --deep-blue: #47769c;
    --purple: #b473bf;
    --deep-pink: #c67f8a;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --light-green: #93d8d0; /*processのナンバー色、薄緑*/
    --deep-purple: #95067D; /*h1のライン、文字、赤紫*/
    --red: #A10D6B; /*h2、３の、文字、赤*/
    --green: #00a2af;
     /*h2、３の擬似マークだけ、式が入らない#B6A18B; 中間ベージュ*/
}
/*ダークモード時*/
@media (prefers-color-scheme: dark) {
    :root {
        --text: #ddd;
        --white: #000; 
        --bg: #7D7A7A; 
        --red: #ddd; 
        --deep-purple: #C500A7;
    }
    footer a { 
       color: var(--deep-bg);
     }
   footer .address p { 
       color: var(--deep-bg);
      }
}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%; /* 何も指定なければ、16pxとなる */
    scroll-behavior: smooth;/* スムーズスクロール */
}
body {
	color: var(--text);
    background: var(--white);
    font-family: Avenir, Arial, "Helvetica Neue", Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ ゴシック", Meiryo, sans-serif;
} 

/*
COMMON
================================================ */
p {
    line-height: 1.6; /* 何も指定なければ、16px ✖︎1.6倍=25.6pxとなる */
    }
img {
    max-width: 100%; 
}
a:hover {
    color: var(--deep-pink); /*PC用で青、スマホ用でピンク、カクニンメヤス*/
}
h1 {
    font-size: 1.125rem;/*marginは、ヘッダー避け用、H1一箇所のみ、以外は基本サイズ*/
    line-height: 1.4;
    margin-top: 125px; /*上のヘッダーとの隙間、ここでしか調整dekinai*/
     }
h2 {
    font-size: 1rem; /*基本サイズ*/
    line-height: 1.4;
    margin-top: 0px;
    }
h3 {  /*基本サイズ*/
    font-size: 1rem;
    }
    
/* Layout ================================================ */

/*「box-sizing: border-box」が指定、リセットCSSで指定されている、WはパディングでImgサイズ調整できる */

.container {  /* hederしたmainの外枠*/
    max-width: 890px;
    width: 100%;
    padding: 0rem 1.5rem; /*これで、中身のwサイズが決まる、PCと分けた、左右の余白*/
    margin: 0 auto; 
    background: var(--white);
    } 
.wrapper {  /*ヘッダーの囲*/
   max-width: 1000px;
   width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    }
.wrap { 
     margin-bottom: 3.3rem;  /*h2 or h3見出し＋本文＋写真のセット、<section> ＝内側全体になる、margin-bottomは、次にくる見出し＝セットとの間隔隙間、*/
    }
.flex_box_2p{ 
   display: flex; 
   flex-wrap: wrap;
   justify-content: space-between;
}
.flex_box_2p_hl{ 
   display: flex; 
   flex-wrap: wrap;
   justify-content: space-between;
   margin: 0 0 2rem 0;
}

 /*写真２枚並べ用、Wマージンはimgのサイズ％で調整にもなるが、パディングで調整にした*//*ブラウザが勝手にボーダーボックスになっている?*/
 
 /*<p>の調整用================================================*/
/*本文調整<p>用、pの上にマージン設定して、imgをboxで囲って無いので、上下に直でパディング、下記*/
   .writing_cent {
      text-align: center;
      }
  .writing_main {
     margin-top: 2rem;
     margin-bottom: 0rem;
     }
 .writing_main_small {
     margin-top: 0.8rem; 
     margin-bottom: 0rem;
     }
.letter_blue {
    color: var(--deep-blue);
    font-size: 0.9rem;
    font-weight: 600;
    }
.letter_blue_l {
    color: var(--deep-blue);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
    }    
    
.writing_purple {
    color: var(--deep-purple);
    }
    
.writing_lineh {
   line-height: 1.25;
   }
   
.line-mark-bg {
border-bottom: 1px solid #B6A18B;
margin-bottom: 4.3rem;
}

.line-mark-bg-front {
    border-top: 1px solid #B6A18B;
    margin-top: 4.3rem; 
    }

/*flexd box内で寄せる*/
.writing_r_hand {
padding-left: 55%;
}

.writing_bott {
  margin-bottom: 1.5rem;
  }
  
/*imag画像
================================================ */
.main-img { 
width:100%;
}
.half-img { 
width: 50%;
}
.half-img-blo { 
width: 50%;
display: block;
}
/*img単発の時、ブロック要素にしてWを有効に*/
/*横並びimag位置の修正用、half-img％に合わせて、Wマージンが引き算で変わる、余白を入れる場合、「box-sizing: border-box」になっているので、パデイングで修正する、ただし、余白分img写真自体の幅は小さくなる*/

 /*各imgの調整用 */
 .img-h-adjust {
     padding-top: 10px;
 }
  .img-w-adjust-left { 
    padding-left: 5px;
  }
  .img-w-adjust-right { 
    padding-right: 5px;
  } 
  .img-top-adjust { 
    padding-top: 2rem;
}
 .img-h-adjust-m {
     margin-top: 10px;
 }
 
 .img-h-adjust-mb {
     margin-bottom: 10px;
 }

   
/*
HEADER
================================================ */
header {
    background: var(--grey);
    padding: 1rem 0; /*上下隙間*/
    /* 下３項はヘッダーの位置固定、画面topに固定*/
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;      /* 一番上に表示*/
}  

header .wrapper { /*headerと.wrapperの間に半角スペースあり、headerの.wrappe*/
    display: flex;  /* スマホでは、ロゴとメニューマーク横並び、pcでは、ロゴとリストの横並び、子要素の横の位置指定が下の次項、親がwrapperで、子要素が、class="logo" と、<nav>の２種類となる、<nav>は、class="btn-menuとclass="top-navに分かれているが、javaでこの２つは、動作一体、消す、映るになっている、スマホでは、見た目のflexは、btn-menuの<button>Menuとclass="logo" になる*/
    justify-content: space-between; /* 両端揃え*/
}
header a {
    color: var(--deep-bg);
    font-size: 0.8rem;
}
.btn-menu {
    position: absolute; /* 親要素を基準とした絶対位置、下項で数値指定*/
    top: 15.0083px;/* ナビの<a>の文字サイズを変えると、M E N Uがセンターに来ないので調整、ヘッダーのHはナビの<a>の文字サイズとなっている、auto*/
    right: 12px;
    border: 1px solid rgba(255,255,255,.5);
    color: var(--deep-bg);
    padding: .5rem 1rem;
    font-size: 0.8rem;
}
.top-nav {
    background: var(--grey);
    width: 0; /*<button>Menuと一体にしてある、 ヘッダー内のナビゲーション、100%から0に変更、スマホ状態で開いた状態、100%を0%で非表示にして、下記にあるコード、.open-menuクラスが付いた時に100%になりmenuを全面表示させる、付ける、外すをJavascriptで指定、*/
    position: absolute;
    z-index: 2;/* 2番目優先に表示*/
    top: 60px;/*開くメニューの位置*/
    right: 0;
    overflow: hidden;  /* はみ出しは非表示*/
    transition: .5s; /* トランジションでアニメーションを加える*/
    
}
.top-nav li {
    text-align: center;
    margin: 2rem 0;/*スマホ  縦並び表示用の空間*/
}
.top-nav a {
    display: block;
}
.top-nav.open-menu {/*メニュー開閉ボタン*/
    width: 100%;
}
.logo {
    color: var(--deep-bg);
    font-size: 0.8rem; 
    display: flex;
    flex-direction: column;
    width: 300px;
    /*上下中央寄せ*/
    justify-content: center;
}/*ヘッダー最初の文字、flexで囲った、自分で式*/
.logo p {
line-height: 1.2;
}

/*heading見出調整H１、２、~
================================================ */

.topheading-title { /*H１の囲いのboxで、ここ全体にグラデーションして、実際のH１を上からかぶせてる*/
   padding-bottom: 3px;  /*下帯線の太さ*/
    background-image: linear-gradient(45deg, #fff 30%, var(--deep-purple) 30%, var(--deep-purple) 50%, #fff 50%, #fff 80%, var(--deep-purple) 80%, var(--deep-purple) 100%);  /* backgroundで背景全体斜線を作っている */
    background-size: 6px 6px;/*background-size: 横幅 縦幅;、長さ(px)で指定斜線の太、細、調整*/
    margin-bottom: 2rem; /*線より先の空きスペース、H２との空間*/
}
.topheading-title h1 {
    background: var(--white); /* 背景全体斜線をH2白抜きしている */
    padding: 0rem 1rem .5rem;/*上ヘッダーと下ラインとの隙間調整*/
    font-size:1.125rem;
    font-weight: 500;  /*フォントの太さを指定するためのプロパティ, 初期値は400*/
    line-height: 1.4;
    color: var(--deep-purple);
}

/*H2、上下ドット線囲みのボーダー設定してあり、現状ボーダーは、FFFで無色*/
h2 {
    font-size: 1rem;
    border-top: #fff dotted 0px;
    border-bottom: #fff double 0px;
    line-height: 1.6; 
    display: flex;
    margin-top: 0rem; /*文節調整、H1が上にあり、H1が有効で相殺になる*/
    margin-bottom: 2rem; /*pの上になると相殺になる*/
    color: var(--red);
}
h2::before {
    content:"";
    border-left: #B6A18B solid 4px;
    position: relative;
    top: 0px;
    width: 1px;
    height: 1.6rem;
    flex; 1;
    margin-right: 10px;
    } 
h3 {
    font-size: 1rem;
    border-top: #fff dotted 0px;
    border-bottom: #fff double 0px;
    line-height: 1.6; 
    display: flex;
    margin-top: 1rem; /*文節調整*/
    margin-bottom: 2rem; /*pの上になると相殺になる*/
    color: var(--red);
}
h3::before {
    content:"";
    border-left: #B6A18B solid 4px;
    position: relative;
    top: 0px;
    width: 1px;
    height: 1.6rem;
    flex; 1;
    margin-right: 10px;
    } 
    /*縦ボーダーを擬似要素で前に並べて、flexで横並び、flexプロパティの初期値は「0 1 auto」です。ようは、 flex-grow: 0; 、 flex-shrink: 1; 、 flex-basis: auto; の状態です。 flex: 0 1 auto; と指定すると、以下のように、flex子要素の横幅はそれぞれの最小の横幅となります。*/

 /*H４は、how toで使用*/
h4 { 
    border-bottom: #B6A18B solid 1px; 
    border-left: #B6A18B solid 1px; 
    padding: 0 0 10px 10px;
    margin: 3rem 0 1.5rem 0;
}
.heading-making-top {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }
.heading-making-top p { 
    font-size: 80%;
    }
.under_line_bg {
    font-size: 1rem;
    border-top: #fff dotted 0px;
    border-bottom: #fff double 0px;
    line-height: 1.6; 
    display: flex;
    margin-top: 0rem; /*文節調*/
    margin-bottom: 1.3rem; /*pの上になると相殺になる*/
    color: var(--text); 
    position: relative;
    margin-left: 1.5rem;
    }
  .under_line_bg::before {
    content:"";
    border: var(--dark-bg) solid 4px;
    position: absolute;
    top: 18px; 
    left: 0px;
    width: 7.1rem;
    height: 0.5rem;
    flex: 1;
    margin-right: 0px; 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter: alpha(opacity=50);
    }  

/*工程 processのナンバー付けとリスト表示
================================================*/
/*img横並び用のflex_box_2pでimg写真だけでセットする場合は、写真にhalf-imgで50%指示をして２列で繰り返しにする、poster-numberを貼り付ける場合は、写真を１枚づつ、class=poster で囲んで、写真に直に50%は掛けないで、posterを親要素としてw50%にして、position: relative;　、poster-numberを子要素として、position: absolute;にして位置してする*/
.poster {
   position: relative; 
   display: flex; 
   width: 50%;
  }
  
  /*クッションのページから、横広がり写真用／ナンバー振り用の親要素======================*/
  .poster_howtomake {
   position: relative; 
   display: flex; 
   width:100%;
  }

  .poster-number-1 {   /*写真の番号毎にnumber-１〜４あり*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    right: 5px; /*img写真をadjustでパデイング調整している分ずらす*/
    bottom: 0;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}
  .poster-number-2 {   /*写真の番号毎にnumber-１〜４あり*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    left: 5px; /*img写真をadjustでパデイング調整している分ずらす*/
    bottom: 0;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}
.poster-number-3 {   /*写真の番号毎にnumber-１〜４あり*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    right: 5px; /*img写真をadjustでパデイング調整している分ずらす*/
    top: 10px;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}
  .poster-number-4 {   /*写真の番号毎にnumber-１〜４あり*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    left: 5px; /*img写真をadjustでパデイング調整している分ずらす*/
    top: 10px;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}
 .poster-number-5 {   /*写真の番号毎にnumber-ありで、単体横一用*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    left: 0px; /*img写真をadjustでパデイング調整している分ずらす*/
    top: 10px;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}
.poster-number-6 {   /*写真の番号毎にnumber-ありで、単体横一用*/
    font-size: 1rem;
    background: var(--light-green);
    color: var(--white);
    text-align: center;
    position: absolute;     /*写真とぬき文字の位置指定*/
    left: 0px; /*img写真をadjustでパデイング調整している分ずらす*/
    top: 100px;
    width: 32px;
    height: 32px; 
    padding-top: 4px; 
}




/*processの説明文リスト表示*/
.process { 
    margin-top: 2rem; 
}
.process li { 
    margin: .5rem 0; 
    display: flex; /*liの文面が長いと（スマホサイズにすると）文字が数字の下に回り込む、liを親要素にする、:beforeのナンバー数字と文書をflex コンテナ指定して、個別のブロックにして、文章の回り込みを防ぐ*/
}
.process ol li { 
     counter-increment: list; 
     /*counter-increment プロパティー と content プロパティーで連番カウンター作り*/
}
.process ol li::before { 
      content: counter(list);  /*list;は、カウンターの名前、任意*/
      color: var(--light-green);
      display: inline-block;
      margin-right: 8px;
}

/*椅子型紙作り方のページ用で、画像、点線など使い======================*/
/*上のprocessと同じ組み方*/
.poster_pattern {
   position: relative; 
   display: flex; 
   border: 0.9px dashed var(--text);
   width: 50%; 
   justify-content: center;
  }
  
/*process_patternの説明文リスト表示、椅子型紙作り方のページ用写真、連番ラストで===========*/
.process_pattern { 
    margin-top: 10px; 
}
.process_pattern li { 
    font-size: 85%; 
    margin: .5rem 0; 
    display: flex; /*liの文面が長いと（スマホサイズにすると）文字が数字の下に回り込む、liを親要素にする、:beforeのナンバー数字と文書をflex コンテナ指定して、個別のブロックにして、文章の回り込みを防ぐ*/
}
.process_pattern ol li { 
     counter-increment: list;
  }
  
/*counter-increment プロパティー と content プロパティーで連番カウンター作り*/
.process_pattern ol li::before { 
      content: counter(list);  /*list;は、カウンターの名前、任意*/
      color: var(--light-green);
      display: inline-block;
      margin-right: 8px;
}

/*Howtoページ／クッションの上部丸点リスト囲／=======================*/
.howtomake {
    margin: 1rem 0 1rem 0;
}

/*liの文面が長いと（スマホサイズにすると）文字が数字の下に回り込む、liを親要素にする、:beforeのナンバー数字と文書をflex コンテナ指定して、個別のブロックにして、文章の回り込みを防ぐ*/

/*丸点のノーマルなリスト表示／クッションhow to から使用／flexを使って*/
.howtomake_pattern {
    position: relative;
    margin-top: 10px; 
}
.howtomake_pattern li { 
    font-size: 85%; 
    margin: .5rem 0; 
    display: flex;
    }
/*counter-increment プロパティー と content プロパティーで連番カウンター作り*/
.howtomake_pattern ul li::before { 
      content: "●";
      color: var(--light-green);
      display: inline-block;
      margin-right: 8px;
}


/*箇条書き、順番付け、Step指示的な表現、説明文リスト表示上のprocessと同じ設定、色、連番文字違い===========*/
.explanation_howto { 
    margin: 30px 0 0 0;
    }
.explanation_howto li { 
     font-size: 100%; 
    margin: .5rem 0; 
    display: flex;
    }
 /*liの文面が長いと（スマホサイズにすると）文字が数字の下に回り込む、liを親要素にする、:beforeのナンバー数字と文書をflex コンテナ指定して、個別のブロックにして、文章の回り込みを防ぐ*/
 .explanation_howto ol li { 
     counter-increment: list;
  }
.explanation_howto ol li::before { 
      content: "Step" counter(list);  /*list;は、カウンターの名前、任意*/
      color: var(--light-green);
      display: inline-block;
      margin-right: 8px;
    }
.howtomake_pattern_l {
    position: relative;
    margin-top: 10px; 
}
.howtomake_pattern_l li { 
    font-size: 100%; 
    margin: .5rem 0; 
    display: flex;
}
.howtomake_pattern_l ul li::before { 
      content: "●";
      color: var(--light-green);
      display: inline-block;
      margin-right: 8px;
    }
    
    
/*btn、グレーベージュボタン================================================*/
.btn_graybeige{
   text-align: center;
   margin-top: 1.15rem;
   }

/*ホバーで下にづれル*/
.btn_graybeige a{
  color: #998;
  font-size: 1rem;
  border: 1px solid #998;
  border-radius: 10px;
  text-decoration: none;
  background: #fff;
  box-shadow: 0px 0px;
  position: relative;
  display: inline-block;
  top: -2px;
  padding: 8px 18px;
}
 
 /*影のボーダー、色、位置*/
.btn_graybeige a:hover {
   box-shadow: 0 1px #ccc;
   top: 2px;
   background: #AAA;
   color: #ddd;
   }
   
   
/*FOOTER
================================================ */
footer { /* フッター外枠ボトム位置とセンター寄せ*/
    text-align: center;
    padding: 1.5rem; 
    background: var(--bg);
}
footer ul { /*親要素ul、flexアイテムの動作指定*/
    display: flex;
    margin-bottom: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
footer li {
    margin: 0 17px;
    margin-bottom: 10px;
   
}
footer a { 
     font-size: 0.85rem ;
}
footer a:hover {
    color: var(--deep-pink);
}
footer small {/*smallは、コピーライト用タグ*/
    color: var(--red);
    font-size: .875rem;/*smallタグだと小さすぎるので大きめにしてあり*/
}
footer .address p { 
    font-size: .875rem; 
    line-height: 1.2;
}

/*
Luminous
================================================ */
/*高さを一定に保って横にスライドできるサイズ*/
.lum-lightbox-inner img {
    max-width: 120vw;
    max-height: 80vh;
}
/*画像が下に入らない*/
.lum-lightbox.lum-open {
    z-index: 4;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {

/* Common */
    h2 {
        font-size: 1rem;
    }
    
 /*Layout*/
.container {  /* hederしたmainの外枠*/
    padding: 0rem 3.3rem; 
    } /* パディングを増減して、写真大きさ、中身調整、パディングで調整する、さらに細かく調整（画面に合わせて）、@mediaを細かく分けて、画面ごとのサイズを％で設定、現状600ジャスト位が少し中身小さい*/

/* Header */
 .btn-menu {
        display: none;/*Menu</button>を表示しない*/
    }
    .top-nav {
        width: 100%;
        position: static;/*見開きメニュー解除、 position: fixed;を解除*/
        display: flex;
        flex-wrap: wrap;
        flex: 1; 
        /*スマホ用の場合は、Menuのボタン表示のみ、ここで初めて、横並び時の指定、注意、スマホ用時点で、"wrapperにflex指定して、logoと<nav>にflex指定してあるのでのflex指定の入れ子になっている*/
    }
    .top-nav li {
        margin: 0.4rem 0 0.6rem 2rem;
    }/*スマホ  縦並び表示用の指定をやめて、PC横並び用の空間あけ*/
    /*メニューの文字数が多くなると、改行されてしまうので工夫必要、wrapにして、下のmarginをプラスにしてあり*/
header .wrapper {/*ここもPC横並び用の空間あけ*/
padding-top: 0rem;
}

/*how to 椅子型*/
.process_pattern li { 
    font-size: 100%;
    }
    }