@charset "UTF-8";
/*---------------------------------------------------基本*/
/*削除*/
h1.dc-headline-title {
    display: none;
}
/*テキスト*/
.top10-code-contents p, 
.top10-code-contents span, 
.top10-code-contents a {
    font-family: Noto Sans JP,sans-serif;
 }
 /*全体*/
.top10-code-contents {
    margin: auto;
    text-align: center;
    width: 100%;
}
 /*画像*/
.top10-code-contents img {
    height: auto;
    width: 100%;
}
section.top10-code-contents h1 {
    text-align: left;
}
/*冒頭コメント*/
.bottom {
    text-align: justify;
    margin: 15px auto 0;
    width: 90%;
}
.bottom span {
    display: block;
    font-weight: 500;
    margin: 1rem 0;
}
.coordinate-area {
    margin: 5rem 0;
}
.coordinate-area ul, .pick-code ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.coordinate-area ul li {
    list-style: none;
    margin: 3rem auto 0;
    padding: 2rem;
}

 /*スタイリスト紹介*/
.stylist {
    margin: 4rem auto 0;
    width: 100%;
}
.stylist ul {
    background: #deedec;
    display: flex;
    justify-content: space-between;
    padding: 2rem 5rem;
}.stylist ul li {
    list-style: none;
    width: 21.5%;
}
.stylist>p::before {
    content: "＼";
    padding-right: 0.5rem;
}
.stylist>p::after {
    content: "／";
    padding-left: 0.5rem;
}
.stylist ul li p {
    margin: 0;
}
.stylist ul li img {
    border-radius: 200px;
}
/*.stylist::after {
    content: "";
    display: inline-block;
    border-left: 1px solid;
    height: 60px;
}*/


 /*コーデセクションの△before&after*/
.coordinate-area>ul>li:nth-child(odd) {
    background: #deedec;
    position: relative;
}
.coordinate-area>ul>li:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -100px;
    border: 100px solid transparent;
    border-top: 40px solid #deedec;
}
.coordinate-area>ul>li:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -100px;
    border: 100px solid transparent;
    border-top: 40px solid #ffffff;
}
/*.coordinate-area>ul>li:nth-child(odd)::before {
    content: "";
    border: 125px solid transparent;
    border-top: 40px solid #ffffff;
    top: 0%;
}*/
.coordinate-area>ul>li:nth-child(1)::before, 
.coordinate-area>ul>li:last-child::after{
    display: none;
}


.coordinate-area ul li h3, 
.coordinate-area ul li p {
    text-align: justify;
}
.coordinate-area ul li h3 {
    font-size: 1.3rem;
    margin: 20px 0 10px;
}
.coordinate-area ul li h4 {
    font-size: 1.2rem;
    text-align: center;
}
.coordinate-area ul li h4 span {
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 0.8rem;
    padding-left: 5px;
}
.coordinate-area ul li h4 span::after {
    content: "coordinate";
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 0.5rem;
}


/*吹き出しややこしいとこ*/
.txt-area .hukidashi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0;
}
.txt-area .hukidashi img {
    width: 16%;
    border-radius: 100px;
}
.txt-area .hukidashi p {
    background: #fff;
    border-radius: 15px;
    margin: 0;
    padding: 1.5rem;
    position: relative;
    text-align: justify;
    width: 80%;
}
.txt-area .hukidashi p::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #fff;
}
.txt-area .hukidashi.b {
    flex-flow: row-reverse;
}
.txt-area .hukidashi.b p::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #fff;
}
.txt-area.b .hukidashi p {
    background: #eee;
}
.txt-area.b .hukidashi p::before {
    border-right: 15px solid #eee;
}
.txt-area.b .hukidashi.b p::before {
    border: 15px solid transparent;
    border-left: 15px solid #eee;
}
.txt-area .hukidashi.c {
    flex-flow: row-reverse;
}
.txt-area .hukidashi.c p::before {
    left: 100%;
    border: 15px solid transparent;
    border-left: 15px solid #eee;
}


/*.pick-code {
    margin-top: 5rem;
}*/
.pick-code p::before {
    font-family: FontAwesome;
    content: "\f00c";
    padding-right: 0.4rem;
}
.pick-code ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pick-code ul::after {
    content: "";
    display: block;
    width: 32.5%;
}
.pick-code ul li {
    list-style: none;
    margin-bottom: 1.2rem;
    width: 32.5%;
}
.pick-code ul li::after {
    content: "\f0ab";
    font-family: FontAwesome;
    color: #1096db;
    font-size: 1.2rem;
}
.pick-code ul li img {
    height: 450px;
    object-fit: cover;
}
.pick-code ul li span {
    background: #deedec;
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.3rem;
}
.pick-code ul li span::after {
    content: "coordinate";
    font-size: .78rem;
    padding-left: .3rem;
}

/*リンク*/
.link-box h4 {
    margin-top: 3rem;
    text-align: center!important;
}
.coordinate-area .link-box ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.coordinate-area .link-box ul li {
    margin: 0;
    padding: 0;
    width: 24.5%;
}

/*.link-box ul > li:first-child:nth-last-child(-n+3), 
.link-box ul > li:first-child:nth-last-child(-n+3) ~ li {
    margin-top: 0;
    width: 32.5%;
}*/
.link-box ul li p {
    background: #1096db;
    border-radius: 100px;
    color: #fff;
    font-size: .78rem;
    margin-top: 10px;
    padding: 5px;
    text-align: center;
}
.link-box ul li span {
    display: block;
    font-size: .86rem;
    margin: 5px 0 -5px;
}




/*-------------------------------------------------------------------------------------------------------------------------------ここからスマホ*/
@media screen and (max-width: 480px) {
/*padding削除*/
main.dc-col.dc-layout-basic-2col__main {
    padding: 0;
}
/*padding調整*/
.dc-container {
    padding: 15px;
}



.stylist ul {
    padding: 2rem;
}
.stylist ul li p {
    font-size: .87rem;
}

.pick-code ul li img {
    height: 180px;
}
.txt-area .hukidashi p {
    padding: 1rem;
    width: 75%;
}
.coordinate-area>ul>li:nth-child(odd)::after {
    margin-left: -65px;
    border: 65px solid transparent;
    border-top: 30px solid #deedec;
}
.coordinate-area>ul>li:nth-child(odd)::before {
    margin-left: -65px;
    border: 65px solid transparent;
    border-top: 30px solid #fff;
}














}