@charset "UTF-8";
/*----------------------共通*/
#textbook-of-fashion p, #textbook-of-fashion li, #textbook-of-fashion span, #textbook-of-fashion figure, #textbook-of-fashion a {
    font-family: Noto Sans JP,sans-serif!important;
}
#textbook-of-fashion {
    width: 750px;
    margin: auto;
}
/*タイトル系*/
#textbook-of-fashion h1 {
    border-bottom: solid 2px;
    border-top: solid 2px;
    font-size: 2.5rem;
    margin-top: 2rem;
    padding: 0.8rem 0;
    text-align: center;
}
#textbook-of-fashion h2 {
    font-size: 2rem;
    margin-top: 5rem;
}
#textbook-of-fashion h3 {
    font-size: 1.55rem;
    line-height: 1.7;
    margin: 5rem 0 2.5rem;
}
#textbook-of-fashion h3::before {
    display: block;
    line-height: 1.8;
}
#textbook-of-fashion .explanation .back h3::before, 
#textbook-of-fashion .setup-link h3::before, 
#textbook-of-fashion .section.sub h3::before, 
#textbook-of-fashion .freebie h3::before {
    display: none;
}
#textbook-of-fashion .explanation .back h3 {
    margin-top: 0;
}
.section.preface h3::before {
    content: "#01";
}
.section.about-dressitem h3::before {
    content: "#02";
}
.section.silhouette h3::before {
    content: "#03";
}
.section.color-coordination h3::before {
    content: "#04";
}
.section.first-step-item h3::before {
    content: "#05";
}
.section.end h3::before {
    content: "#06";
}
#textbook-of-fashion h4 {
    font-size: 1.25rem;
    border-bottom: solid 2px;
    line-height: 1.7;
    margin: 4rem 0 3rem;
    padding: 0 0 .8rem 2rem;
    position: relative;
    width: 48%;
}
#textbook-of-fashion .iya-silhouette h4 {
    width: 60%;
}
#textbook-of-fashion .section.preface .box .linebox h4, 
#textbook-of-fashion .section.end .back h4 {
    border: none;
    margin: 0 auto 1rem;
    padding: 0;
    text-align: center;
    width: auto;
}
#textbook-of-fashion .linebox2 h4 {
    border: none;
    margin: 0 auto 3rem;
    padding: 0;
    text-align: center;
}
#textbook-of-fashion .try h4 {
    border-bottom: solid 2px;
    border-top: solid 2px;
    margin: 3rem auto;
    padding: 0.8rem 0;
    text-align: center;
    width: auto;
}
#textbook-of-fashion .recommend-col h4 {
    border: none;
    margin: 2rem auto 0;
    padding: 0;
    text-align: center;
    width: auto;
}
#textbook-of-fashion .sright {
    border: none;
    font-size: 1.3rem;
    margin-top: 2rem;
    text-align: right;
    padding: 0 1.7rem .8rem 0;
    width: auto;
}
.about-color h5 {
    padding-left: 1.7rem;
}
.acolor h6 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding-left: 1.7rem;
}
h5.sty1::before, .acolor h6::before {
    content: "\f04d";
    font-family: FontAwesome;
    padding-right: 0.5rem;
}
.top-box h5, .under-box h5 {
    margin: 2rem 0;
    text-align: center;
}
/*タイトル系ここまで*/

/*文字*/
#textbook-of-fashion p {
    line-height: 1.7;
    padding: 1.7rem;
    text-align: justify;
    word-break: break-all;
}
#textbook-of-fashion .explanation .back .right {
    padding: 0;
}
#textbook-of-fashion .right {
    width: 75%;
    margin: 0 0 0 auto;
    padding: 0 1.7rem 1.7rem 0;
}
.iya-silhouette li p {
    background: #f5f5f5;
}
#textbook-of-fashion .finally p {
    margin: auto;
    padding: 1rem 1.7rem;
    text-align: end;
}
/*pのpading調整*/
#textbook-of-fashion .back.item-q p {
    padding: 1.7rem 0 0;
}
#textbook-of-fashion .acolor .col p {
    padding-top: .8rem;
    margin: 0;
}
#textbook-of-fashion .explanation .linebox2 p {
    padding: .8rem 1rem 1.7rem;
}
#textbook-of-fashion .section.end .linebox2 p {
    margin: 0;
    padding: 3rem;
}
#textbook-of-fashion .about-setup .linebox2 p {
    padding: 1.7rem 8rem;
}
/*小さい文字のとこ*/
#textbook-of-fashion .left.small {
    font-size: .95rem;
    margin: 0;
    padding: 1rem;
}
/*#textbook-of-fashion li p {
    padding: 0;
}*/
p.right.leftframe {
    position: relative;
}
p.right.leftframe::before {
    content: "";
    display: block;
    border-top: solid 1px;
    border-left: solid 1px;
    height: 45px;
    left: -20px;
    position: absolute;
    top: -15px;
    width: 45px;
}
/*枠ボックス*/
.section.end .linebox, .about-setup .linebox, 
.section.preface .linebox {
    position: relative;
}
.about-setup .linebox::before, 
.section.preface .linebox::before {
    content: "";
    border-top: solid 2px;
    border-left: solid 2px;
    display: block;
    height: 50px;
    left: 1rem;
    position: absolute;
    top: 0;
    width: 50px;
}
.about-setup .linebox::after, 
.section.preface .linebox::after {
    content: "";
    border-right: solid 2px;
    border-bottom: solid 2px;
    bottom: 0;
    display: block;
    height: 50px;
    right: 1rem;
    width: 50px;
    position: absolute;
}
/*実線ボックス*/
.linebox2 {
    border: solid 2px;
    border-radius: 20px;
    padding: 3rem 0;
}
.linebox2 ul li {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
/*改行指定*/
#textbook-of-fashion span.br_spase {
    display: block;
    margin: 0;
    padding-bottom: 1.5rem;
}
/*ul pading打消し*/
#textbook-of-fashion ul {
    padding-left: 0;
}
/*リストスタイル打消し*/
#textbook-of-fashion ul li {
    list-style: none;
}
/*グレー背景*/
.recommend-col .back {
    background: #f5f5f5;
    padding: 1.7rem;
}
.explanation .back, .back.item-q {
    background: #f5f5f5;
    padding: 3rem;
}
.recommend-col .back {
    margin-bottom: 3rem;
}
/*画像幅調整*/
li.acloth img, .try img {
    width: 750px;
    height: auto;
}
/*liのbefore*/
.section.preface .box .linebox ul li {
    position: relative;
}
.section.preface .box .linebox ul li::before, 
.about-setup .linebox ul li::before {
    content: "\f00c";
    font-family: FontAwesome;
    left: -25px;
    position: absolute;
}
.section.end .linebox ul li {
    background: #fff;
    font-size: 1.15rem;
    margin: 1.7rem;
    padding: .8rem 1rem;
    position: relative;
}
.linebox ul .ok::after, 
.linebox ul .no::after, 
.linebox ul .neither::after {
    font-size: 1rem;
    position: absolute;
    right: 20px;
}
.linebox ul .ok::after {
    content: "：変えられる";
}
.linebox ul .no::after {
    content: "：変えられない";
}
.linebox ul .neither::after {
    content: "：積み重ねが必要";
}

/*----------------------共通ここまで*/



/*目次*/
.vertical {
    margin: auto;
    padding: 4rem 0 2.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.vertical li {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 1.3rem;
    position: relative;
}
.table-of-contents {
    background: #eee;
}
/*番号と疑似スタイル*/
li.ttl1::before {
    content: "#01";
}
li.ttl2::before {
    content: "#02";
}
li.ttl3::before {
    content: "#03";
}
li.ttl4::before {
    content: "#04";
}
li.ttl5::before {
    content: "#05";
}
li.ttl6::before {
    content: "#06";
}
li.ttl1::before, li.ttl2::before, li.ttl3::before, li.ttl4::before,
li.ttl5::before, li.ttl6::before {
    display: block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    writing-mode: lr;
}
/*↑のbefore見せ方替えたやつ*/
#textbook-of-fashion .explanation li h4::before, 
#textbook-of-fashion .ex-coordinate h4::before {
    content: "\f10c";
    font-family: FontAwesome;
    left: 5px;
}
/*before必要ないとこ打消し*/
.ttl-left.noneb::before {
    display: none;
}
/*h4の中のspan色々設定*/
.explanation h4 span, .ex-coordinate h4 span {
    display: block;
}
.acolor .ttl-left2 span {
    margin-bottom: 0;
    text-align: left;
}

/*タカシさんの実録部分*/
.section.about-dressitem .flex1, 
.section.about-dressitem .flex2 {
    display: flex;
}
.section.about-dressitem .flex1 img, 
.section.about-dressitem .flex2 img {
    width: 375px;
    height: 525px;
    object-fit: cover;
}
.section.about-dressitem .flex2 {
    flex-direction: row-reverse;
}
.section.about-dressitem .flex1 span, 
.section.about-dressitem .flex2 span {
    padding: 3rem;
}
/*ラインボックスの設定*/
.linebox ul, .linebox2 ul {
    margin: auto;
    padding-bottom: 1.5rem;
    width: fit-content;
}
.linebox li {
    margin: auto;
    text-align: justify;
    position: relative;
/*    width: 50%;*/
}
.section.preface .linebox {
    margin-top: 3rem;
}
.section.preface .box .linebox2 ul {
    width: 80%;
}
.section.preface .box .linebox2 ul li {
    background: #f5f5f5;
    padding: .5rem .9rem;
}
.explanation ul {
    padding: 0;
}
/*h4のbefore指定*/
.ttl-left1::before {
    content: "1.";
    position: absolute;
    left: 10px;
}
.ttl-left2::before {
    content: "2.";
    position: absolute;
    left: 10px;
}
.ttl-left3::before {
    content: "3.";
    position: absolute;
    left: 10px;
}
.ttl-left4::before {
    content: "4.";
    position: absolute;
    left: 10px;
}
.flex-image {
    display: flex;
    height: 700px;
}
.flex-image img {
    object-fit: cover;
    width: 50%;
    height: auto;
}
/*セットアップ部分*/
.back.item-q img {
    width: 660px;
    height: auto;
    margin-bottom: 2.5rem;
}
.about-setup span {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 2rem 0;
    text-align: center;
}
.setup-link a {
    border-bottom: dashed 2px;
    color: #00a1e0;
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    margin: 2rem 0 2rem auto;
    padding-bottom: .5rem;
    text-align: right;
    width: fit-content;
}
.setup-link a::after, .linebox2 .top-box a::after, 
.linebox2 .under-box a::after {
    content: "\f061";
    font-family: FontAwesome;
    margin-left: .5rem;
    padding: .5rem;
}
.setup-link a:hover {
    text-decoration: none;
}
.under-box {
    margin-top: 6rem;
}
.linebox2 .top-box a, .linebox2 .under-box a {
    border-bottom: dashed 2px;
    color: #00a1e0;
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    margin: 2rem auto;
    padding-bottom: 0.5rem;
    width: fit-content;
}
.coordinates ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
    width: 750px;
}
.coordinates ul li {
    margin-bottom: 1rem;
}
.coordinates ul li img {
    width: 375px;
    height: 700px;
    object-fit: cover;
}

/*無彩色有彩色のところ1つめ*/
.acolor .col {
    margin: 3rem 0;
}
.acolor ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.acolor .col li {
    width: 50%;
}
.acolor .col li img {
    width: 100%;
}
.acolor span {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}
/*無彩色有彩色のところ2つめ*/
.about-color ul li {
    margin: 0 auto 2rem;
    padding-bottom: 0;
}
.about-color ul li img {
    display: block;
    margin: auto;
    width: 60%;
    height: auto;
}
/*ベーシックカラー使おう*/
.about-basic-col img {
    display: block;
    margin: auto;
    width: 50%;
}
.about-basic-col figure {
    border: solid 2px #ddd;
    margin: 0 auto;
    padding: 3rem 0;
}
.about-basic-col figure::before {
    content: "[ ベーシックカラー ]";
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}
/*セクション#06*/
.about-fasion {
    margin-top: 5rem;
}
.review-box p {
    background: #f5f5f5;
}
.review-box p::before {
    content: "\f075";
    font-family: FontAwesome;
    padding-right: 0.5rem;
}
.section.end .linebox ul {
    width: 100%;
}
.section.end .back {
    background: #f5f5f5;
    padding: 3rem;
}
.section.end .back img {
    display: block;
    margin: auto;
    width: 70%;
}
.section.end .linebox2 {
    margin: 2rem 0;
    padding: 0;
}
.dc figure img {
    width: 200px;
    height: 48.59px;
}
.dc figure {
    margin-top: 2rem;
    padding-right: 1.7rem;
    text-align: end;
}

/*ここから追加セクションCSS★黒スキニー訴求追加1227*/
.property span {
    font-size: .75rem;
    font-weight: normal;
    margin-top: 0.5rem;
    text-align: right;
}
#textbook-of-fashion .pants-commentary .linebox2 {
    border-radius: 10px;
    padding: 1rem 2rem;
}
.pants-commentary .linebox2 li {
    font-weight: 500;
    margin: 0.8rem 0;
}
.try.use-pants h5 {
    text-align: center;
}
.try.use-pants ul li::before {
    display: block;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.try.use-pants ul .no1::before {
    content: "01";
}
.try.use-pants ul .no2::before {
    content: "02";
}
.try.use-pants ul .no3::before {
    content: "03";
}
.try.use-pants ul .no4::before {
    content: "04";
}
#textbook-of-fashion .back.item-q .notpd {
    padding: 0;
}
.try.use-pants {
    padding-top: 5rem;
}
.try.use-pants ul li {
    margin-top: 4rem;
}
.rec-shoes ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.rec-shoes ul li {
    width: 33%;
}
.rec-shoes ul li img {
    width: 100%;
    height: auto;
}
#textbook-of-fashion .rec-shoes ul li p {
    background: #00a1e0;
    color: #fff;
    margin: 0.8rem 0;
    padding: 0.5rem;
    text-align: center;
}
#textbook-of-fashion .section.subforsub h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
}
.rec-shoes h5 {
    margin-top: 3rem;
    text-align: center;
}
.rec-shoes {
    margin-bottom: 5rem;
}
/*追加セクションCSSここまで*/




/*-------------------------------------------------------------------------------------------------------------------------------ここからスマホ*/
@media screen and (max-width: 480px) {
/*全体調整*/
#textbook-of-fashion {
    width: 100%;
}
#textbook-of-fashion h2 {
    padding-left: 1.7rem;
}
#textbook-of-fashion h3 {
    margin-bottom: 0;
    padding-left: 1.7rem;
}
#textbook-of-fashion .section.preface h3, 
#textbook-of-fashion .setup-link h3, 
#textbook-of-fashion .section.end h3 {
    padding-bottom: 1.7rem;
}
#textbook-of-fashion .explanation .back h3 {
    margin: 0 0 2.5rem;
    padding-left: 0;
}
#textbook-of-fashion .iya-silhouette h4 {
    width: 90%;
}
#textbook-of-fashion h4 {
    width: 80%;
}
/*文字*/
#textbook-of-fashion p {
    font-size: 1.1rem;
}
#textbook-of-fashion .left.small {
    padding: 1.7rem;
}
#textbook-of-fashion .about-setup .linebox2 p {
    padding: 1.7rem 4rem;
}
#textbook-of-fashion .about-color p {
    padding-top: 0;
}
#textbook-of-fashion .explanation .linebox2 p {
    font-size: 1rem;
    margin: 0;
    padding: 0 1rem;
}
/*画像*/
#textbook-of-fashion img {
    width: 100%;
    height: auto;
}
/*画像の幅や高さなど微調整*/
.flex-image {
    height: auto;
}
#textbook-of-fashion .flex-image img {
    height: 375px;
    width: 50%;
}
#textbook-of-fashion .about-color .linebox2 img {
    width: 80%;
    height: auto;
}
.coordinates ul {
    width: 100%;
}
.coordinates ul li {
    height: auto;
    width: 50%;
}
#textbook-of-fashion .section.about-dressitem .flex1 img, 
#textbook-of-fashion .section.about-dressitem .flex2 img {
    height: 250px;
    width: 50%;
}
#textbook-of-fashion .back.item-q img {
    width: 100%;
    height: auto;
}
#textbook-of-fashion .coordinates ul li img {
    height: 375px;
}
#textbook-of-fashion .acolor ul li img {
    display: block;
    margin: auto;
    width: 55%;
}
#textbook-of-fashion .dc figure img {
    width: 40%;
    height: auto;
}
#textbook-of-fashion .about-basic-col img {
    height: auto;
    width: 50%;
}
.about-basic-col figure {
    width: 90%;
}
/*画像ここまで*/

/*目次のとこ*/
.vertical {
    width: auto;
    margin: auto;
}
.vertical li {
    font-size: .8rem;
    font-weight: 500;
    padding: 0 0.5rem;
}
#textbook-of-fashion .vertical .title {
    margin: auto;
}
li.ttl1::before, li.ttl2::before, li.ttl3::before, 
li.ttl4::before, li.ttl5::before, li.ttl6::before {
    top: -25px;
    font-weight: 600;
}
/*ラインボックス　余白追加*/
#textbook-of-fashion .section.preface .box .linebox h4 {
    padding-top: 1rem;
}
.section.about-dressitem .flex1, 
.section.about-dressitem .flex2 {
    width: 100%;
}
.explanation .back, .back.item-q {
    padding: 2rem;
}
#textbook-of-fashion .right {
    width: 80%;
}
.acolor ul {
    display: block;
}
.acolor .col li {
    width: 100%;
}
.section.end .linebox ul li {
    margin: 1.7rem 0;
}

.linebox2 {
    border: solid 1px;
    border-radius: 10px;
    margin: auto;
    width: 90%;
}
#textbook-of-fashion .explanation .linebox2 ul li {
    padding: 0.8rem 2rem;
}
.setup-link a {
    margin-right: .8rem;
}
.about-setup .linebox ul {
    padding-top: 2rem;
}
.section.end .linebox2 {
    margin: 2rem auto;
}
#textbook-of-fashion .rec-shoes ul li p {
    font-size: .8rem;
}

}