@charset "utf-8";
/*
Theme Name: Hirai Wakako atelier
Author: A.Karasuyama
Description: Hirai Wakako atelier original theme
Version: 1.0
Tested up to: 3.7.4
*/
/* ==========================================
	Last Up Date 2024/02/05
 --------------------------------------------
	INDEX
 --------------------------------------------
    0.00.00 ALL SETTING
        0.01.00 @keyfream
	1.00.00 PC_media screen 
		1.01.00 #main_photo の設定
        1.02.00 #news の設定
        1.03.00 #concept の設定
        1.04.00 #lesson の設定
        1.05.00 #order の設定
        1.06.00 #profile の設定
        1.07.00 #access の設定
        1.08.00 breakpoint-569 投稿
	2.00.00 PC_media screen 
		2.01.00 #main_photo の設定
        2.02.00 #news の設定
        2.03.00 #concept の設定
        2.04.00 #lesson の設定
        2.05.00 #order の設定
        2.06.00 #profile の設定
        2.07.00 #access の設定   
        2.08.00 breakpoint-569 投稿
    3.00.00 SP_media screen
		3.01.00 #main_photo の設定
        3.02.00 #news の設定
        3.03.00 #concept の設定
        3.04.00 #lesson の設定
        3.05.00 #order の設定
        3.06.00 #profile の設定
        3.07.00 #access の設定 
        3.08.00 breakpoint-569 投稿

========================================== */
/* ==========================================
0.00.00 ALL SETTING
========================================== */
/* 下のニュースとバーナサイズ  #110 1190*/
/* ==========================================
    0.01.00 @keyfream
========================================== */
@keyframes pathmove {
    0%  { height:0;
          top:20px;
          opacity: 0;
    }
    30% { height:30px;
          opacity: 1;
    }
    100%{ height:0;
          top:80px;
          opacity: 0;
    }
}
/* ==========================================
1.00.00 PC_media screen 
========================================== */
@media screen and (min-width:1025px),print{
/* ==========================================
	1.01.00 #main_photo の設定
========================================== */
div#mainPhoto {
    max-width: 1980px;
	margin: 0 auto;
	box-sizing: border-box;
}
div#mainPhoto div.inBox {
	width: 100%;
	height: 100vh;
	position: relative;
    background: url("image/index/mainPhoto.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
}
div#mainPhoto div.inBox > p:first-child {
	position: absolute;
    font: 400 19px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    letter-spacing: 0.3rem;
    bottom: calc(50% - 187px);
    left: 50px;
    height: 374px;
}
div#mainPhoto div.inBox > div:nth-child(2) {
    position: absolute;
    left: calc(50% - 220px);
    bottom: calc(50% - 240px);
    width: 440px;
    height: 480px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div#mainPhoto div.inBox > div:nth-child(2) > p {
   filter: drop-shadow(6px 6px 4px rgba(0,0,0,0.75));
}
div#mainPhoto div.inBox > a {
    position: absolute;
    display: flex;
    right: 0;
    bottom: calc(50% - 75px);
    width: 50px;
    height: 150px;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 8px 0 0 0;
    box-sizing: border-box;
}
div#mainPhoto div.inBox > a:hover {
    opacity: 0.5;
}
div#mainPhoto div.inBox > a img {
    width: 45px;
    height: 117px;
}
div#mainPhoto div.inBox > p:last-child {
    position: absolute;
    left: calc(50% - 19px);
    bottom: 65px;
}
div#mainPhoto div.inBox > p:last-child::before {
    content: "";
    background: #ffffff;
    width: 1px;
    height: 50px;
    position: absolute;
    bottom: -60px;
    right: 18px;
    animation: pathmove 1s ease-in-out infinite;
}
/* ==========================================
	1.02.00 #news の設定
========================================== */
div#news {
    max-width: 1980px;
    margin: 60px auto;
    padding: 0 100px;
    box-sizing: border-box;
}
div#news div.inBox {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%;
    height: 80px;
    background: #ffffff;
    position: relative;
    display: flex;
}
div#news div.inBox::before {
    content: "";
    background: url("image/index/news.svg") no-repeat center center;
    position: absolute;
    width: 108px;
    height: 28px;
    left: -54px;
    top: calc(50% - 14px);
}
div#news div.inBox::after {
    content: "";
    background: #dcdcdc;
    position: absolute;
    max-width: 1230px;
    width: 100%;
    height: 80px;
    right: -40px;
    top: 15px;
    z-index: -1;
}
div#news div.inBox ul {
    width: 80%;
    height: 100%;
    box-sizing: border-box;
}
div#news div.inBox ul > li {
    height: 100%;
    display: flex;
    padding: 0 0 0 16%;
	 align-items: center;
}
div#news div.inBox ul > li p {
    font: 400 16px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.1rem;
    align-items: center;
    display: flex;
    height: 0.2;
    color: #000000;
    padding: 0 50px 0 0;
}
div#news div.inBox ul > li a {
    font: 400 16px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.1rem;
    align-items: center;
    display: flex;
    height: 0.2;
    color: #000000;
	}
div#news div.inBox > a {
    font: 400 16px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
}
div#news div.inBox > a:hover {
    color: #e18686;
}
/* ==========================================
	1.03.00 #concept の設定
========================================== */
div#concept {
    max-width: 1980px;
    margin: 70px auto 70px;
    padding: 0 50px;
    position: relative;
}
div#concept::before {
    content: "";
    background: url("image/index/conceptIMG.jpg") no-repeat center center;
    width: 1320px;
    height: 760px;
    position: absolute;
    left: calc(50% - 990px);
    top: 0;
}
div#concept div {
    width: 750px;
    background: rgba(255,255,255,0.90);
    position: absolute;
    z-index: 2;
    right: 10%;
    bottom: -820px;
}
div#concept div::before {
    content: "";
    background: url("image/index/concept.svg") no-repeat center center;
    width: 275px;
    height: 100px;
    position: absolute;
    bottom: -50px;
    right: -40px;
}
div#concept div > h1 {
    font: 400 30px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.3;
    width: 610px;
    padding: 70px 70px 0;
}
div#concept div > h1 span {
    font: 400 40px "ta-kotodama-r", sans-serif;
    color: #754e2b;
    vertical-align: 1px;
}
div#concept div > p {
    font: 400 15px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    letter-spacing: 0.01em;
    line-height: 2.4;
    width: 600px;
    text-align: justify;
    padding: 34px 80px 70px 70px;
}
/* ==========================================
	1.04.00 #lesson の設定
========================================== */
div#lesson {
    margin: 1000px auto 0;
    padding: 0 0 100px;
    position: relative;
    background: #ffffff;
}
div#lesson div.inBox {
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
}
div#lesson div.inBox > h2 {
    width: 120px;
    height: 22px;
    margin: 0 calc(50% - 60px);
    padding: 100px 0;
    position: relative;
}
div#lesson div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 1px;
    background: #000000;
    bottom: 83px;
    left: 0;
}
div#lesson div.inBox > h2::after {
    content: "教室情報";
    width: 120px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 55px;
    left: 0;
    text-align: center;
}
div#lesson div.inBox > div {
    width: 50%;
    padding: 0 35px 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
div#lesson div.inBox > div > p:first-child {
    width: 100%;   
}
div#lesson div.inBox > div > h4 {
    font: 400 22px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.0;
    letter-spacing: 0.01em;
    padding: 15px 0;
    width: 100%;   
}
div#lesson div.inBox > div > p:nth-child(3) {
    font: 400 14px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
    width: 100%;
}
div#lesson div.inBox > div > a {
    font: 400 20px "Times New Roman", Times, "serif";
    color: #725f5e;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin: 25px 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}
div#lesson div.inBox > div > a:hover {
    color: #e18686;
}
div#lesson div.inBox > div > a::before{
    content: "";
    position: absolute;
    right: 19px;
    top: calc(50% - 4px);
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
}
div#lesson div.inBox > div > a div.hexagon {
	width: 37px;
    height: 40px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0% 25%);
    background: #725f5e;
    transform: rotate(90deg);
    margin: 0 3px 0 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
div#lesson div.inBox > div > a:hover div.hexagon {
	background: #e18686;
    transform: rotate(180deg);
}
/* ==========================================
	1.05.00 #order の設定
========================================== */
div#order {
    max-width: 1980px;
    margin: 0 auto;
    position: relative;
}
div#order::before {
    content: "";
    background: url("image/index/orderBg.jpg") no-repeat center center;
    background-size: cover;
    position: absolute;
    top:0;
    left: calc(50% - 990px);
    width: 1980px;
    height: 806px;
}
div#order div.inBox {
    display: flex;
    flex-wrap: wrap;
}
div#order div.inBox > h2 {
    width: 265px;
    height: 22px;
    padding: 100px 0 130px;
    position: relative;
    margin: 0 calc(50% - 165px);
}
div#order div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 1px;
    background: #fff;
    bottom: 103px;
    left: calc(50% - 60px);
}
div#order div.inBox > h2::after {
    content: "受注生産品";
    width: 120px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #fff;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 68px;
    left: calc(50% - 60px);
    text-align: center;
}
div#order div.inBox > ul.slider {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    
}
div#order div.inBox > ul li p img {
    width: 100%; 
    height: auto;
}
.slider .slick-slide {
    margin:0 0.5%;/*スライド左右の余白調整*/
    max-width: 300px;
}
div#order div.inBox > ul li h3 {
    font: 400 20px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 13px 0;
}
div#order div.inBox > ul li p:last-child {
    font: 400 14px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
}
/* ==========================================
	1.06.00 #profile の設定
========================================== */
div#profile {
    max-width: 1980px;
    margin: 97px auto 220px;
    padding: 0 50px;
    position: relative;
}
div#profile::before {
    content: "";
    position: absolute;
    top: -150px;
    left: calc(50% - 1920px);
    width: 2000px;
    height: 1000px;
    z-index: -1;
    background: #ffffff;
    transform: rotate(-45deg);
}
div#profile::after {
    content: "";
    background: url("image/index/creator.svg") no-repeat center center;
    width: 370px;
    height: 102px;
    position: absolute;
    right: calc(50% - 800px);
    bottom: -262px;
    z-index: 1;
}
div#profile div.inBox {
    display: flex;
    flex-wrap: wrap;
    max-width: 1280px;
    position: relative;
}
div#profile div.inBox::before {
    content: "";
    background: url("image/index/profileBg.svg") no-repeat center center;
    width: 130px;
    height: 367px;
    position: absolute;
    left: -190px;
    top: 100px;
}
div#profile div.inBox > h2 {
    width: 120px;
    height: 22px;
    padding: 100px 0 130px;
    position: relative;
    margin: 0 calc(50% - 60px);
}
div#profile div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 1px;
    background: #000;
    bottom: 110px;
    left: calc(50% - 60px);
}
div#profile div.inBox > h2::after {
    content: "講師紹介";
    width: 120px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 78px;
    left: calc(50% - 60px);
    text-align: center;
}
div#profile div.inBox > p {
    width: 510px;
    height: 510px;
    position: relative;
    left: calc(50% - 625px);
    top: 0;
}
div#profile div.inBox > p::before {
    content: "";
    width: 510px;
    height: 510px;
    position: absolute;
    left: -30px;
    top: 30px;
    background: #f0f0f0;
    z-index: -1;
}
div#profile div.inBox > p::after {
    content: "";
    width: 340px;
    height: 264px;
    position: absolute;
    right: -140px;
    bottom: -120px;
    background: url("image/index/profileName.svg") no-repeat center center;
    z-index: 1;
}
div#profile div.inBox > div {
    max-width: 500px;
    position: absolute;
    top: 305px;
    right: 0;
}
div#profile div.inBox > div li {
    padding: 0 0 20px 50px;
}
div#profile div.inBox > div li h3 {
    font: 400 20px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    position: relative;
    padding: 0 0 5px;
}
div#profile div.inBox > div li h3::before {
    content: "";
    width: 38px;
    height: 38px;
    position: absolute;
    bottom: -10px;
    left: -50px;
    background: url("image/index/image/profile01.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(2) h3::before {
    background: url("image/index/profile02.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(3) h3::before {
    background: url("image/index/profile03.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(4) h3::before {
    background: url("image/index/profile04.svg") no-repeat center center;
}
div#profile div.inBox > div li p {
    font: 400 14px YuGothic, "Yu Gothic medium", "FHiragino Sans", Meiryo, "sans-serif";
    line-height: 1.8;
    letter-spacing: 0.01rem;
    text-align: justify;
}
div#profile div.inBox > div > p {
    font: 400 14px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 2.0;
    letter-spacing: 0.01rem;
    text-align: justify;
}
/* ==========================================
	1.07.00 #access の設定
========================================== */
div#access {
    max-width: 1980px;
    margin: 100px auto 0;
    padding: 0 50px 250px;
    background: #ffffff;
    z-index: -3;
    position: relative;
}
div#access div.inBox {
    max-width: 1280px;
}
div#access div.inBox > h2 {
    width: 113px;
    height: 22px;
    padding: 100px 0 100px;
    position: relative;
    margin: 0 calc(50% - 60px);
}
div#access div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 1px;
    background: #000;
    bottom: 83px;
    left: calc(50% - 60px);
}
div#access div.inBox > h2::after {
    content: "アクセス";
    width: 120px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 53px;
    left: calc(50% - 60px);
    text-align: center;
}
div#googlemap {
    max-width: 1020px;
    height: 600px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    box-sizing: border-box;
}
div#access div.inBox > h3 {
    font: 400 21px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.01rem;
    text-align: center;
    padding: 50px 0 10px;
}
div#access div.inBox > h4 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    text-align: center;
}
div#access div.inBox > ul {
    max-width: 470px;
    width: 100%;
    margin: 40px auto 0;
}
div#access div.inBox > ul li {
    padding: 30px 0;
    display: flex;
    border-bottom: 1px solid #a4a4a4;
}
div#access div.inBox > ul li:last-child {
    border-bottom: 1px none#a4a4a4;
}
div#access div.inBox > ul li p {
    font: 400 15px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    letter-spacing: 0.03rem;
}
div#access div.inBox > ul li p:first-child {
    color: #727272;
    width: 130px;
}
div#access div.inBox > div:last-child {
    margin: 90px auto 0;
    width: 100%;
}
div#access div.inBox > div:last-child p.pc {
    display: block !important;
}
div#access div.inBox > div:last-child p.sp {
    display: none !important;
}
div#access div.inBox > div:last-child p:first-child {
    margin: 0 auto 80px;
}
div#access div.inBox > div:last-child p:last-child {
    font: 400 16px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    letter-spacing: 0.03rem;
    text-align: right;
    padding: 10px 0 0;
}
/* ==========================================
	1.08.00 breakpoint-569 投稿
========================================== */
div.news-post {
    max-width: 800px;
    margin: 140px auto 200px;
    padding: 0 50px;
	 display: flex;
	 flex-wrap: wrap;
   	justify-content: center;
}
div.news-post h1.page-title {
    font: 400 24px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 1.0;
    letter-spacing: 0.01rem;
    margin: 0 0 20px;
	 width: 100%;
	 position: relative;
}
div.news-post h1.page-title::before {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -7px;
    left: 0;
    border-top: solid 0.5px #88706c;
    border-bottom: solid 0.5px #88706c;
}
div.news-post time.article-date {
	 width: 100%;
	 text-align: right;
}
div.news-post div.article-img {
	width: 100%;
	margin: 0 auto;
}
div.news-post p {
    font: 400 15px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 2.0;
    letter-spacing: 0.01rem;
    width: 100%;
    margin: 5px auto 30px;
    text-align: justify;
}
div.news-post a {
    font: 400 14px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: 0.02rem;
    padding: 12px 17px;
    background: #e18686;
    margin: 25px 10px 0;	
 	border-radius: 10px;
}
div.news-post a img {
    display: none;
}
div.news-post a:last-child {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 25px 0 0;
    background: #ffffff;
    color: #e18686;
    border: solid 0.5px #e18686;
    border-radius: 0;
    padding: 20px 15px 20px 8px;
	 font-size: 15px;
}
div.news-post figure.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
div.news-post figure.wp-block-image {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}
}
/* ==========================================
2.00.00 PC_media screen 
========================================== */
@media screen and (max-width: 1024px) and (min-width:569px) {
/* ==========================================
	2.01.00 #main_photo の設定
========================================== */
div#mainPhoto {
	margin: 0 auto;
	box-sizing: border-box;
}
div#mainPhoto div.inBox {
	width: 100%;
	height: 100vh;
	position: relative;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/mainPhoto.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
}
div#mainPhoto div.inBox > p:first-child {
	position: absolute;
    font: 400 16px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    letter-spacing: 0.1rem;
    bottom: calc(50% - 145px);
    left: 35px;
    height: 290px;
    text-align: center;
}
div#mainPhoto div.inBox > div:nth-child(2) {
    align-items: center;
    position: absolute;
    left: calc(50% - 145px);
    bottom: calc(50% - 170px);
    width: 290px;
    height: 340px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div#mainPhoto div.inBox > div:nth-child(2) > p {
   filter: drop-shadow(6px 6px 4px rgba(0,0,0,0.75));
}
div#mainPhoto div.inBox > a {
    position: absolute;
    display: flex;
    right: 0;
    bottom: calc(50% - 65px);
    width: 50px;
    height: 130px;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 8px 0 0 0;
    box-sizing: border-box;
}
div#mainPhoto div.inBox > a:hover {
    opacity: 0.5;
}
div#mainPhoto div.inBox > p:last-child {
    position: absolute;
    left: calc(50% - 16px);
    bottom: 65px;
    width: 36px;
}
div#mainPhoto div.inBox > p:last-child::before {
    content: "";
    background: #ffffff;
    width: 1px;
    height: 50px;
    position: absolute;
    bottom: -60px;
    right: 18px;
    animation: pathmove 1s ease-in-out infinite;
}
/* ==========================================
	2.02.00 #news の設定
========================================== */
div#news {
    margin: 50px auto;
    padding: 0 55px;
    box-sizing: border-box;
}
div#news div.inBox {
    margin: 0 auto;
    width: 100%;
    height: 70px;
    background: #ffffff;
    position: relative;
    display: flex;
}
div#news div.inBox::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/news.svg") no-repeat center center;
    position: absolute;
    width: 70px;
    height: 20px;
    left: -35px;
    top: calc(50% - 10px);
}
div#news div.inBox::after {
    content: "";
    background: #dcdcdc;
    position: absolute;
    max-width: 1230px;
    width: 100%;
    height: 70px;
    right: -30px;
    top: 15px;
    z-index: -1;
}
div#news div.inBox ul {
    width: 80%;
    height: 100%;
    box-sizing: border-box;
}
div#news div.inBox ul > li {
    height: 100%;
    display: flex;
    padding: 0 0 0 15%;
	 align-items: center;
}
div#news div.inBox ul > li > p {
    font: 400 14px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.1rem;
    align-items: center;
    display: flex;
}
div#news div.inBox ul > li > p:first-child {
    padding: 0 20px 0 0;
}
div#news div.inBox > a {
    font: 400 14px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #000000;
}
div#news div.inBox > a:hover {
    color: #e18686;
}

div#news div.inBox figure.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
div#news div.inBox figure.wp-block-image {
    width: 49%;
    box-sizing: border-box;
    padding: 5px 0;
}
/* ==========================================
	2.03.00 #concept の設定
========================================== */
div#concept {
    margin: 70px auto 70px;
    padding: 0 35px;
    position: relative;
}
div#concept::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/conceptIMG.jpg") no-repeat center center;
    background-size: cover;
    width: 1024px;
    height: 588px;
    position: absolute;
    right: 0;
    top: 0;
}
div#concept div {
    max-width: 700px;
    width: 100%;
    background: rgba(255,255,255,0.90);
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -750px;
}
div#concept div::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/concept.svg") no-repeat center center;
    width: 200px;
    height: 74px;
    position: absolute;
    bottom: -37px;
    right: 0;
}
div#concept div > h1 {
    font: 400 22px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.3;
    padding: 30px 50px 20px;
}
div#concept div > h1 span {
    font: 400 32px "ta-kotodama-r", sans-serif;
    color: #754e2b;
    vertical-align: 1px;
}
div#concept div > p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    letter-spacing: 0.01em;
    line-height: 2.4;
    /* max-width: 600px; */
    text-align: justify;
    padding: 0 50px 30px 50px;
}
/* ==========================================
	2.04.00 #lesson の設定
========================================== */
div#lesson {
    margin: 930px auto 0;
    padding: 0 0 100px;
    position: relative;
    background: #ffffff;
}
div#lesson div.inBox {
    display: flex;
    flex-wrap: wrap;
}
div#lesson div.inBox > h2 {
    width: 104px;
    height: 19px;
    margin: 0 calc(50% - 52px);
    padding: 80px 0;
    position: relative;
}
div#lesson div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 104px;
    height: 1px;
    background: #000000;
    bottom: 68px;
    left: 0;
}
div#lesson div.inBox > h2::after {
    content: "教室情報";
    width: 104px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 45px;
    left: 0;
    text-align: center;
}
div#lesson div.inBox > div {
    width: 50%;
    padding: 0 35px 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
div#lesson div.inBox > div:nth-child(2) {
    padding: 0 15px 0 35px;
}
div#lesson div.inBox > div > p:first-child {
    width: 100%;   
}
div#lesson div.inBox > div > h4 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.0;
    letter-spacing: 0.01em;
    padding: 15px 0;
    width: 100%;  
}
div#lesson div.inBox > div > p:nth-child(3) {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
    width: 100%;
}
div#lesson div.inBox > div > a {
    font: 400 16px "Times New Roman", Times, "serif";
    color: #725f5e;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin: 20px 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}
div#lesson div.inBox > div > a:hover {
    color: #e18686;
}
div#lesson div.inBox > div > a::before{
    content: "";
    position: absolute;
    right: 16px;
    top: calc(50% - 4px);
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
}
div#lesson div.inBox > div > a div.hexagon {
	width: 32px;
    height: 36px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0% 25%);
    background: #725f5e;
    transform: rotate(90deg);
    margin: 0 3px 0 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
div#lesson div.inBox > div > a:hover div.hexagon {
	background: #e18686;
    transform: rotate(180deg);
}
/* ==========================================
	2.05.00 #order の設定
========================================== */
div#order {
    margin: 0 auto;
    position: relative;
}
div#order::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/orderBg.jpg") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 720px;
}
div#order div.inBox {
    display: flex;
    flex-wrap: wrap;
}
div#order div.inBox > h2 {
    width: 234px;
    height: 19px;
    padding: 80px 0 85px;
    position: relative;
    margin: 0 calc(50% - 117px);
}
div#order div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 104px;
    height: 1px;
    background: #ffffff;
    bottom: 68px;
    left: calc(50% - 60px);
}
div#order div.inBox > h2::after {
    content: "受注生産品";
    width: 104px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #ffffff;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 45px;
    left: calc(50% - 60px);
    text-align: center;
}
div#order div.inBox > ul.slider {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    
}
div#order div.inBox > ul li p img {
    width: 100%; 
    height: auto;
}
.slider .slick-slide {
    margin:0 0.5%;/*スライド左右の余白調整*/
    max-width: 300px;
}
div#order div.inBox > ul li h3 {
    font: 400 17px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 13px 0;
}
div#order div.inBox > ul li p:last-child {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
}
/* ==========================================
	2.06.00 #profile の設定
========================================== */
div#profile {
    margin: 87px auto 210px;
    padding: 0 35px 400px;
    position: relative;
}
div#profile::before {
    content: "";
    position: absolute;
    top: -150px;
    left: calc(50% - 1713px);
    width: 2000px;
    height: 1000px;
    z-index: -1;
    background: #ffffff;
    transform: rotate(-45deg);
}
div#profile::after {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/creator.svg") no-repeat center center;
    width: 270px;
    height: 74px;
    position: absolute;
    right: 15px;
    bottom: -239px;
    z-index: 1;
}
div#profile div.inBox {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
div#profile div.inBox::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profileBg.svg") no-repeat center center;
    width: 110px;
    height: 310px;
    position: absolute;
    left: calc(50% - 390px);
    top: 100px;
}
div#profile div.inBox > h2 {
    width: 120px;
    height: 19px;
    padding: 100px 0 85px;
    position: relative;
    margin: 0 calc(50% - 60px);
}
div#profile div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 104px;
    height: 1px;
    background: #000;
    bottom: 68px;
    left: calc(50% - 52px);
}
div#profile div.inBox > h2::after {
    content: "講師紹介";
    width: 104px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 45px;
    left: calc(50% - 52px);
    text-align: center;
}
div#profile div.inBox > p {
    width: 280px;
    height: 280px;
    position: relative;
    left: calc(50% - 140px);
    top: 0;
}
div#profile div.inBox > p::before {
    content: "";
    width: 280px;
    height: 280px;
    position: absolute;
    left: -30px;
    top: 30px;
    background: #f0f0f0;
    z-index: -1;
}
div#profile div.inBox > p::after {
    content: "";
    width: 280px;
    height: 216px;
    position: absolute;
    right: -151px;
    bottom: -77px;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profileName.svg") no-repeat center center;
    z-index: 1;
}
div#profile div.inBox > div {
    width: 100%;
    position: absolute;
    top: 560px;
    right: 0;
}
div#profile div.inBox > div ul {
    max-width: 380px;
    margin: 0 auto;
}
div#profile div.inBox > div li {
    padding: 0 0 20px 40px;
}
div#profile div.inBox > div li h3 {
    font: 400 17px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    position: relative;
    padding: 0 0 5px;
}
div#profile div.inBox > div li h3::before {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: -5px;
    left: -40px;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile01.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(2) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile02.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(3) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile03.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(4) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile04.svg") no-repeat center center;
}
div#profile div.inBox > div li p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.8;
    letter-spacing: 0.01rem;
    text-align: justify;
}
div#profile div.inBox > div > p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.8;
    letter-spacing: 0.01rem;
    text-align: justify;
    max-width: 380px;
    margin: 0 auto;
}
/* ==========================================
	2.07.00 #access の設定
========================================== */
div#access {
    margin: 100px auto 0;
    padding: 0 35px 200px;
    background: #ffffff;
    z-index: -3;
    position: relative;
}
div#access div.inBox > h2 {
    width: 94px;
    height: 19px;
    padding: 90px 0 80px;
    position: relative;
    margin: 0 calc(50% - 47px);
}
div#access div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 104px;
    height: 1px;
    background: #000;
    bottom: 70px;
    left: calc(50% - 52px);
}
div#access div.inBox > h2::after {
    content: "アクセス";
    width: 104px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 47px;
    left: calc(50% - 52px);
    text-align: center;
}
div#googlemap {
    max-width: 920px;
    height: 500px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    box-sizing: border-box;
}
div#access div.inBox > h3 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.01rem;
    text-align: center;
    padding: 50px 0 10px;
}
div#access div.inBox > h4 {
    font: 400 15px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    text-align: center;
}
div#access div.inBox > ul {
    max-width: 470px;
    width: 100%;
    margin: 40px auto 0;
}
div#access div.inBox > ul li {
    padding: 30px 0;
    display: flex;
    border-bottom: 1px solid #a4a4a4;
}
div#access div.inBox > ul li:last-child {
    border-bottom: 1px none#a4a4a4;
}
div#access div.inBox > ul li p {
    font: 400 14px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    letter-spacing: 0.03rem;
}
div#access div.inBox > ul li p:first-child {
    color: #727272;
    width: 130px;
}
div#access div.inBox > div:last-child {
    margin: 80px auto 0;
    width: 100%;
}
div#access div.inBox > div:last-child p.pc {
    display: block !important;
}
div#access div.inBox > div:last-child p.sp {
    display: none !important;
}
div#access div.inBox > div:last-child p:first-child {
    margin: 0 auto 70px;
}
div#access div.inBox > div:last-child p:last-child {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    letter-spacing: 0.03rem;
    text-align: center;
    padding: 10px 0 0;
}
/* ==========================================
	2.08.00 breakpoint-569 投稿
========================================== */
div.news-post {
    max-width: 800px;
	 width: 100%;
    margin: 140px auto 200px;
    padding: 0 35px;
	 display: flex;
	 flex-wrap: wrap;
   	justify-content: center;
	 box-sizing: border-box;
}
div.news-post h1.page-title {
    font: 400 22px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 1.4;
    letter-spacing: 0.01rem;
    margin: 0 0 20px;
	 width: 100%;
	 position: relative;
}
div.news-post h1.page-title::before {
    content: "";
    width: 100%;
    height: 1.5px;
    position: absolute;
    bottom: -7px;
    left: 0;
    border-top: solid 0.5px #88706c;
    border-bottom: solid 0.5px #88706c;
}
div.news-post time.article-date {
	 width: 100%;
	 text-align: right;
}
div.news-post div.article-img {
	width: 100%;
	margin: 0 auto;
}
div.news-post p {
    font: 400 15px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 2.0;
    letter-spacing: 0.01rem;
    width: 100%;
    margin: 7px auto 30px;
    text-align: justify;
}
div.news-post a {
    font: 400 13px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: 0.02rem;
    padding: 10px 15px;
    background: #e18686;
    margin: 20px 10px 0;	
 	border-radius: 10px;
}
div.news-post a img {
    display: none;
}
div.news-post a:last-child {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0 0;
    background: #ffffff;
    color: #e18686;
    border: solid 0.5px #e18686;
    border-radius: 0;
    padding: 20px 15px 20px 8px;
    font-size: 15px;
}
div.news-post figure.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
div.news-post figure.wp-block-image {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}
}
/* ==========================================
3.00.00 SP_media screen 
========================================== */
@media screen and (max-width: 568px) {
/* ==========================================
	3.01.00 #main_photo の設定
========================================== */
div#mainPhoto {
	margin: 0 auto;
	box-sizing: border-box;
}
div#mainPhoto div.inBox {
	width: 100%;
	height: 100vh;
	position: relative;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/mainPhoto.jpg") no-repeat top center;
    background-size: cover;
}
div#mainPhoto div.inBox > p:first-child {
	position: absolute;
    font: 400 14px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    letter-spacing: 0.1rem;
    bottom: calc(50% - 145px);
    left: 15px;
    height: 290px;
    text-align: center;
}
div#mainPhoto div.inBox > div:nth-child(2) {
    align-items: center;
    position: absolute;
    left: calc(50% - 100px);
    bottom: calc(50% - 120px);
    width: 200px;
    height: 240px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div#mainPhoto div.inBox > div:nth-child(2) > p {
   filter: drop-shadow(6px 6px 4px rgba(0,0,0,0.75));
}
div#mainPhoto div.inBox > a {
    position: absolute;
    display: flex;
    right: 0;
    bottom: calc(50% - 60px);
    width: 40px;
    height: 120px;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 8px 0 0 0;
    box-sizing: border-box;
}
div#mainPhoto div.inBox > a img {
    width: 38px;
    height: auto;
}
div#mainPhoto div.inBox > p:last-child {
    display: none;
}
/* ==========================================
	3.02.00 #news の設定
========================================== */
div#news {
    margin: -45px auto 0;
    box-sizing: border-box;
}
div#news div.inBox {
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    position: relative;
    padding: 20px;
}
div#news div.inBox::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/news.svg") no-repeat center center;
    position: absolute;
    width: 60px;
    height: 16px;
    left: calc(50% - 30px);
    top: 15px;
}
div#news div.inBox ul {
    width: 100%;
    box-sizing: border-box;
}
div#news div.inBox ul > li {
    margin: 20px 0;
}
div#news div.inBox ul > li > p {
    font: 400 13px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.1rem;
    line-height: 1.6;
}
div#news div.inBox ul > li > p:first-child {
    color: #725f5e;
}
div#news div.inBox > a {
    font: 400 13px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    position: absolute;
    bottom: -20px;
    right: calc(50% - 110px);
    background: #ffffff;
    color: #725f5e;
    width: 220px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 0.5px #725f5e;
}

div#news div.inBox figure.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
div#news div.inBox figure.wp-block-image {
    width: 49%;
    box-sizing: border-box;
    padding: 5px 0;
}
/* ==========================================
	3.03.00 #concept の設定
========================================== */
div#concept {
    position: relative;
}
div#concept::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/conceptIMG_sp.jpg") no-repeat center center;
    background-size: cover;
    width: 569px;
    height: 350px;
    position: absolute;
    right: 0;
    top: -290px;
    z-index: -1;
}
div#concept div {
    width: 100%;
    background: rgba(255,255,255,0.90);
    margin: 360px 0 0;
    padding: 0 15px;
    box-sizing: border-box;
}
div#concept div::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/concept.svg") no-repeat center center;
    width: 150px;
    height: 56px;
    position: absolute;
    bottom: -28px;
    right: 0;
}
div#concept div > h1 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.3;
    padding: 25px 0 15px;
    text-align: justify;
}
div#concept div > h1 span {
    font: 400 22px "ta-kotodama-r", sans-serif;
    color: #754e2b;
    vertical-align: 1px;
}
div#concept div > p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    letter-spacing: 0.01em;
    line-height: 2.2;
    text-align: justify;
    padding: 0 0 35px;
}
/* ==========================================
	3.04.00 #lesson の設定
========================================== */
div#lesson {
    margin: 80px auto 0;
    padding: 0 0 80px;
    position: relative;
    background: #ffffff;
}
div#lesson div.inBox > h2 {
    width: 90px;
    height: 18px;
    margin: 0 calc(50% - 45px);
    padding: 50px 0 70px;
    position: relative;
}
div#lesson div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 1px;
    background: #000000;
    bottom: 60px;
    left: 0;
}
div#lesson div.inBox > h2::after {
    content: "教室情報";
    width: 90px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 40px;
    left: 0;
    text-align: center;
}
div#lesson div.inBox > div {
    width: 100%;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
div#lesson div.inBox > div:nth-child(2) {
    margin: 0 0 50px
}
div#lesson div.inBox > div > p:first-child {
    width: 100%;   
}
div#lesson div.inBox > div > h4 {
    font: 400 19px "ta-kotodama-r", sans-serif;
    color: #000000;
    line-height: 1.0;
    letter-spacing: 0.01em;
    padding: 15px 0 10px;
}
div#lesson div.inBox > div > p:nth-child(3) {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000000;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
}
div#lesson div.inBox > div > a {
    font: 400 16px "Times New Roman", Times, "serif";
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin: 15px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #725f5e;
    width: 100%;
    height: 50px;
}
.hexagon {
	display: none;
}
/* ==========================================
	3.05.00 #order の設定
========================================== */
div#order {
    margin: 0 auto;
    position: relative;
}
div#order::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/orderBg.jpg") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 600px;
}
div#order div.inBox {
    display: flex;
    flex-wrap: wrap;
}
div#order div.inBox > h2 {
    width: 214px;
    height: 18px;
    padding: 50px 0 70px;
    position: relative;
    margin: 0 calc(50% - 107px);
}
div#order div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 1px;
    background: #ffffff;
    bottom: 60px;
    left: calc(50% - 45px);
}
div#order div.inBox > h2::after {
    content: "受注生産品";
    width: 90px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #ffffff;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 45px);
    text-align: center;
}
div#order div.inBox > ul.slider {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    
}
div#order div.inBox > ul li p img {
    width: 100%; 
    height: auto;
}
.slider .slick-slide {
    margin:0 0.5%;/*スライド左右の余白調整*/
    max-width: 250px;
}
div#order div.inBox > ul li h3 {
    font: 400 16px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 13px 0;
}
div#order div.inBox > ul li p:last-child {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-align: justify;
}
/* ==========================================
	3.06.00 #profile の設定
========================================== */
div#profile {
    margin: 79px auto 0;
    padding: 0 15px;
    position: relative;
}
div#profile::before {
    content: "";
    position: absolute;
    top: -150px;
    left: calc(50% - 1713px);
    width: 2000px;
    height: 1000px;
    z-index: -1;
    background: #ffffff;
    transform: rotate(-45deg);
}
div#profile::after {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/creator.svg") no-repeat center center;
    width: 200px;
    height: 56px;
    position: absolute;
    right: 15px;
    bottom: -105px;
    z-index: 1;
}
div#profile div.inBox {
    position: relative;
}
div#profile div.inBox::before {
    content: "";
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profileBg.svg") no-repeat center center;
    width: 80px;
    height: 228px;
    position: absolute;
    left: calc(50% - 250px);
    top: 30px;
}
div#profile div.inBox > h2 {
    width: 100px;
    height: 18px;
    padding: 50px 0 70px;
    position: relative;
    margin: 0 calc(50% - 60px);
}
div#profile div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 1px;
    background: #000;
    bottom: 60px;
    left: calc(50% - 45px);
}
div#profile div.inBox > h2::after {
    content: "講師紹介";
    width: 90px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 45px);
    text-align: center;
}
div#profile div.inBox > p {
    max-width: 280px;
    width: 100%;
    height: 280px;
    position: relative;
    margin: 0 auto;
}
div#profile div.inBox > p::before {
    content: "";
    width: 280px;
    height: 280px;
    position: absolute;
    left: -30px;
    top: 30px;
    background: #f0f0f0;
    z-index: -1;
}
div#profile div.inBox > p::after {
    content: "";
    width: 210px;
    height: 162px;
    position: absolute;
    right: -50px;
    bottom: -50px;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profileName.svg") no-repeat center center;
    z-index: 1;
}
div#profile div.inBox > div {
    width: 100%;
    margin: 90px 0 0;
}
div#profile div.inBox > div ul {
    max-width: 340px;
    margin: 0 auto;
}
div#profile div.inBox > div li {
    padding: 0 0 25px 0;
}
div#profile div.inBox > div li h3 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    position: relative;
    padding: 0 0 7px 35px;
}
div#profile div.inBox > div li h3::before {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: 10px;
    left: -1px;
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile01.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(2) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile02.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(3) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile03.svg") no-repeat center center;
}
div#profile div.inBox > div li:nth-child(4) h3::before {
    background: url("http://art-wakako.main.jp/art-wakako/wp-content/themes/original/image/profile04.svg") no-repeat center center;
}
div#profile div.inBox > div li p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.4;
    letter-spacing: 0.01rem;
    text-align: justify;
}
div#profile div.inBox > div > p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.6;
    letter-spacing: 0.01rem;
    text-align: justify;
    max-width: 340px;
    margin: 0 auto;
}
/* ==========================================
	3.07.00 #access の設定
========================================== */
div#access {
    margin: 80px auto 0;
    padding: 0 15px 150px;
    background: #ffffff;
    position: relative;
}
div#access div.inBox > h2 {
    width: 90px;
    height: 18px;
    padding: 80px 0 70px;
    position: relative;
    margin: 0 calc(50% - 47px);
}
div#access div.inBox > h2::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 1px;
    background: #000;
    bottom: 60px;
    left: calc(50% - 45px);
}
div#access div.inBox > h2::after {
    content: "アクセス";
    width: 90px;
    font: 400 14px "ta-kotodama-r", sans-serif;
    color: #000;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 45px);
    text-align: center;
}
div#googlemap {
    width: 100%;
    height: 320px;
    margin: 0 auto;
    box-sizing: border-box;
}
div#access div.inBox > h3 {
    font: 400 18px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.01rem;
    text-align: center;
    padding: 35px 0 7px;
}
div#access div.inBox > h4 {
    font: 400 15px "ta-kotodama-r", sans-serif;
    line-height: 1.0;
    letter-spacing: 0.05rem;
    text-align: center;
}
div#access div.inBox > ul {
    max-width: 400px;
    width: 100%;
    margin: 10px auto 0;
}
div#access div.inBox > ul li {
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid #a4a4a4;
}
div#access div.inBox > ul li:last-child {
    border-bottom: 1px none#a4a4a4;
}
div#access div.inBox > ul li p {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.2;
    letter-spacing: 0.03rem;
}
div#access div.inBox > ul li p:first-child {
    color: #727272;
    width: 110px;
}
div#access div.inBox > div:last-child {
    margin: 40px auto 0;
    max-width: 400px;
    width: 100%;
}
div#access div.inBox > div:last-child p.pc {
    display: none !important;
}
div#access div.inBox > div:last-child p.sp {
    display: block !important;
}
div#access div.inBox > div:last-child p:first-child + p {
    margin: 0 auto 60px;
}
div#access div.inBox > div:last-child p:last-child {
    font: 400 13px YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    line-height: 1.0;
    letter-spacing: 0.03rem;
    text-align: center;
    padding: 10px 0 0;
}
/* ==========================================
	3.08.00 breakpoint-569 投稿
========================================== */
div.news-post {
	 width: 100%;
    margin: 90px auto 110px;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
}
div.news-post h1.page-title {
    font: 400 18px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 1.4;
    letter-spacing: 0.01rem;
    margin: 0 0 14px;
    width: 100%;
    position: relative;
}
div.news-post h1.page-title::before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -5px;
    left: 0;
    border-top: solid 0.5px #88706c;
    border-bottom: solid 0.5px #88706c;
}
div.news-post time.article-date {
	 width: 100%;
	 text-align: right;
}
div.news-post div.article-img {
	width: 100%;
	margin: 0 auto;
}
div.news-post p {
    font: 400 13px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #000;
    line-height: 2.0;
    letter-spacing: 0.01rem;
    width: 100%;
    margin: 10px auto 20px;
    text-align: justify;
}
div.news-post a {
    font: 400 12.5px Zen Kaku Gothic New, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: 0.02rem;
    padding: 10px 15px;
    background: #e18686;
    margin: 20px 10px 0;
    border-radius: 10px;
}
div.news-post a img {
    display: none;
}
div.news-post a:last-child {
	 font-size: 14px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0;
    background: #ffffff;
    color: #e18686;
    border: solid 0.5px #e18686;
    border-radius: 0;
    padding: 20px 15px 20px 8px;
}
div.news-post figure.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
div.news-post figure.wp-block-image {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}
}