@charset "UTF-8"; 

/* ==========================================================================
   parts
   ========================================================================== */

/* header
   ========================================================================== */

header.mobile nav.main .nav.logo { flex: 1 0 135px; }
header.mobile nav.main .nav.logo a { width: 135px; height: 10px; }
header.mobile nav.main .nav.logo a.replace::after { background-image: url(/media/houmu/logo_header.png); }

header.mobile nav.main .nav.contact { display: none; }
/* header.mobile nav.main .nav.contact { flex: 0 0 20px; margin-right: 5px; }
header.mobile nav.main .nav.contact a { width: 20px; height: 20px; }
header.mobile nav.main .nav.contact a.replace::after { background-image: url(/media/houmu/icon_contact.svg); } */



/* footer
   ========================================================================== */

footer { border-top: 1px solid #ea5504; margin-top: 50px; }



/* nav highlighting
   ========================================================================== */

body.service nav ul li.service a span { color: #fff; font-weight: 350; }
body.yuigon nav ul li.yuigon a span,
body.souzoku nav ul li.souzoku a span,
body.service.index nav ul li.service a span,
body.news nav ul li.news a span,
body.access nav ul li.access a span { color: #ea5504; font-weight: 500; }



/* article
   ========================================================================== */

.article-header { background-color: #ffc400; margin-bottom: 0; }

.article-header h1 { height: auto; min-height: 100px; background: none; padding: 0; flex-direction: column; justify-content: center; }

.article-header h1 > svg { width: 20px; height: 30px; flex: none; fill: none; stroke: #595757; margin: 0 0 10px; }
.article-header h1 > .text { margin-bottom: 10px; }
.article-header h1 > .text > .heading { color: #595757; font-family: 'Noto Sans CJK JP', sans-serif; font-size: 1.7rem; font-weight: 100; line-height: 1.2; text-align: center; }
.article-header h1 > .text > .sub { color: #595757; font-family: 'Noto Sans CJK JP', sans-serif; font-size: .9rem; font-weight: 350; line-height: 1; text-align: center; margin-top: 10px; }

.article-header.sub { background: none; border-bottom: 1px solid #e0dfdf; padding-bottom: 20px; margin-bottom: 0; }
.article-header.sub h1 { min-height: auto; }
.article-header.sub h1 > svg { stroke: #707070; flex: none; }
.article-header.sub h1 > .text > .heading { color: #595757; }
.article-header.sub h1 > .text > .sub { color: #595757; }

.article-header ~ .article-header { margin-top: -10px; }

body.houmu .article-body.styled { width: 100%; }
article > .article-body > h1 { padding: 0 10px; margin: 0 auto 30px; }
article > .article-body > h1 .text,
article > .article-body > h1 .text > span { display: block; }
article > .article-body > h1 .text > .heading { font-size: 1.4rem; font-weight: 700; line-height: 1.6; }
article > .article-body > h1 .text > .extras { display: flex; align-items: center; margin-bottom: 5px; }
article > .article-body > h1 .text .date { font-size: 1.1rem; font-weight: 350; margin-right: 10px; }

.article-body .buttons { text-align: center; }

article > .article-footer { text-align: right; padding: 0 10px; }



/* general
   ========================================================================== */

a.button.index span { background-image: url(/media/houmu/icon_index.svg); padding-right: 20px; }

.index-list ul { border-top: none; }
.index-list ul li { border-bottom-color: #e0dfdf; }
.index-list ul li a .heading { background-image: url(/media/houmu/arrow_next.svg); background-size: auto 11px; }

/* contact box */
#contact { height: 130px; background-color: #ea5504; position: relative; }
#contact .inner { display: flex; justify-content: center; flex-direction: column; color: #fff; text-align: center; padding: 20px 0 0; }

#contact p.decorated { width: 150px; font-size: 1.4rem; font-weight: 500; margin: 0 auto; position: relative; }
#contact p.decorated::before,
#contact p.decorated::after { content: ''; background-color: #fff; width: 1px; height: 30px; position: absolute; top: -7px; }
#contact p.decorated::before { transform: translate(-20px, 0) rotate(-30deg); left: 0; }
#contact p.decorated::after { transform: translate(20px, 0) rotate(30deg); right: 0; }
_:lang(x)::-ms-backdrop, #top #contact p.decorated::before { left: calc(50% - 75px); } /* ie 11 */

#contact .bound { display: flex; justify-content: center; flex-direction: column; margin-top: 5px; }
#contact p.contact { display: flex; justify-content: center; align-items: center; font-family: 'Noto Serif CJK JP', serif; font-size: 2.7rem; font-weight: 500; line-height: 1; vertical-align: middle; margin: 10px auto 0; }
#contact p.contact .sub { display: flex; height: 20px; align-items: center; font-family: 'Noto Sans CJK JP', sans-serif; font-size: .9rem; font-weight: 700; background: url(/media/houmu/icon_contact_w_l.svg) no-repeat left center; background-size: auto 20px; padding-left: 15px; margin-right: 10px; }

#contact .extras { width: 224px; height: 178px; background: url(/media/houmu/bg_feature_contact.png) no-repeat center bottom; background-size: auto 170px; position: absolute; top: -178px; left: calc(50% - 112px); }
#contact .extras p { display: flex; justify-content: center; align-items: center; width: 120px; height: 70px; color: #ea5504; font-size: 1rem; font-weight: 700; line-height: 1.2; background: url(/media/houmu/bg_feature_contact_sub.svg) no-repeat center center; background-size: 120px 70px; position: absolute; top: 10px; left: -30px; }
#contact .extras p span { display: inline-block; margin-left: 20px; }

/* feature panel */
body.houmu .feature { width: 310px; margin: 0 auto; }
body.houmu .feature h1 { display: block; color: #595757; border-radius: 30px; padding: 30px; margin-bottom: 0; box-sizing: border-box; }
body.houmu .feature h1 > span { display: block; }
body.houmu .feature h1 .heading { font-size: 2.8rem; font-weight: 300; line-height: 1.3; }
body.houmu .feature h1 .sub { font-size: 1.4rem; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
body.houmu .feature .summary { height: 170px; background-repeat: no-repeat; background-position: center center; background-size: auto 170px; margin-top: -30px; position: relative; }
body.houmu .feature .summary .sub { display: flex; justify-content: center; align-items: center; width: 100px; height: 64px; font-size: 1.2rem; font-weight: 500; line-height: 1.2; text-align: center; background: url(/media/houmu/bg_feature_sub.svg) no-repeat 0 0; background-size: 100px 64px; position: absolute; }

body.houmu .feature.yuigon .summary .sub:nth-of-type(1) { top: 10px; left: 10px; }
body.houmu .feature.yuigon .summary .sub:nth-of-type(2) { top: 0; right: 10px; }
body.houmu .feature.yuigon .summary .sub:nth-of-type(3) { bottom: 0; right: 20px; }

body.houmu .feature.souzoku .summary .sub:nth-of-type(1) { top: 10px; left: 15px; }
body.houmu .feature.souzoku .summary .sub:nth-of-type(2) { bottom: 0; left: 5px; }
body.houmu .feature.souzoku .summary .sub:nth-of-type(3) { top: 60px; right: 10px; }

body.houmu .feature.yuigon h1,
body.houmu .feature.yuigon .button { background-color: #ffc400; }
body.houmu .feature.souzoku h1,
body.houmu .feature.souzoku .button { background-color: #ffe96e; }

body.houmu .feature.yuigon .summary { background-image: url(/media/houmu/bg_feature_yuigon.png); }
body.houmu .feature.souzoku .summary { background-image: url(/media/houmu/bg_feature_souzoku.png); }

body.houmu .feature .buttons { width: 100%; text-align: center; }



/* top page
   ========================================================================== */

body.top main { background: none; padding-bottom: 0; }

body.top article { margin-bottom: 120px; }

body.top .article-header { background: none; }

body.top .article-header.billboard::before { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ffe96e 0%,#ffe96e 50%,#ffc400 50%,#ffc400 100%); position: absolute; top: 0; left: 0; z-index: -1; }
body.top .article-header.billboard { height: 500px; margin-bottom: 60px; }

body.top .article-header .arrow { display: flex; position: absolute; left: calc(50% - 20px); bottom: -20px; }
body.top .article-header .arrow-left-half {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #ffe96e transparent transparent;
}
body.top .article-header .arrow-right-half {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ffc400 transparent transparent transparent;
}

body.top .article-header.sub h1 > svg { stroke: #ea5504; }
body.top .article-header h1 > .text > .heading { font-size: 1.2rem; font-weight: 300; }
body.top .article-header h1 > .text > .sub { font-size: 1.5rem; font-weight: 500; }

body.top .article-body { border-top: none; }

body.top #top .feature { margin-bottom: 30px; }

body.top article#service { margin-bottom: 0; }

body.top #service .article-header.sub { border-bottom: none; }
body.top #service .article-body { background-color: #ffedcb; }

body.top #service nav.services ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; width: 100%; margin: 0 auto; }
body.top #service nav.services ul li { width: 100%; border-bottom: 1px solid #fff; padding: 20px; box-sizing: border-box; position: relative; }
body.top #service nav.services ul li:last-child { border-bottom: none; }
body.top #service nav.services ul li a { display: flex; justify-content: flex-start; align-items: center; width: 280px; height: 40px; background: url(/media/houmu/bg_top_service_heading.svg) no-repeat 0 0; background-size: 280px 40px; padding: 0 15px; margin: 0 auto 15px; box-sizing: border-box; transition: .25s; }
body.top #service nav.services ul li a:hover { color: #ea5504; }
body.top #service nav.services ul li a .heading { display: block; width: 100%; font-size: 1.5rem; font-weight: 500; background: url(/media/houmu/arrow_next.svg) no-repeat right center transparent; background-size: auto 10px; padding-right: 20px; margin-top: -7px; }

body.top #service nav.services ul li .summary { display: flex; width: 100%; margin: 0 auto; }
body.top #service nav.services ul li .summary .sub { display: inline-block; font-size: 1.3rem; font-weight: 300; line-height: 1.6; }
body.top #service nav.services ul li .summary img { display: none; }

body.top #access { display: flex; justify-content: center; height: 157px; background: url(/media/houmu/icon_access.svg) no-repeat center 20px #595757; background-size: auto 60px; margin-bottom: 30px; position: relative; }
body.top #access a { display: flex; justify-content: center; align-items: center; width: 280px; height: 48px; border: 2px solid #707070; border-radius: 24px; background-color: #fff; box-sizing: border-box; position: absolute; bottom: 20px; transition: .25s; }
body.top #access a:hover { color: #ea5504; }
body.top #access a span { display: block; }
body.top #access a > span { display: flex; justify-content: center; flex-wrap: wrap; width: 90%; background: url(/media/houmu/arrow_next.svg) no-repeat right center transparent; background-size: auto 10px; }
body.top #access a .heading { font-size: 1.2rem; font-weight: 300; }
body.top #access a .sub { font-size: 1.5rem; font-weight: 500; margin-top: 3px; }

body.top #news .index-list ul li > a,
body.top #news .index-list ul li > span { width: 100%; margin: 0 auto; box-sizing: border-box; }
body.top #news .index-list ul li a { transition: .25s; }
body.top #news .index-list ul li a:hover { background-color: #ebebeb; }

body.top #top .houmu-slides { width: 100%; height: 480px; margin: 0 auto; }
body.top #top .houmu-slide { width: 100%; height: 480px; position: relative; }

body.top #top .houmu-slide h1 { display: flex; justify-content: flex-start; flex-direction: column; width: 100%; height: 200px; background-color: #ea5504; margin-bottom: 20px; box-sizing: border-box; }
body.top #top .houmu-slide h1 > span { display: block; }
body.top #top .houmu-slide h1 .heading { font-size: 2.8rem; font-weight: 300; line-height: 1.3; margin: 30px 0; }
body.top #top .houmu-slide h1 .decorated { display: block; width: 160px; font-size: 1.4rem; font-weight: 500; text-align: center; margin: 0 auto 15px; position: relative; }
body.top #top .houmu-slide h1 .decorated::before,
body.top #top .houmu-slide h1 .decorated::after { content: ''; background-color: #fff; width: 1px; height: 30px; position: absolute; top: -7px; }
body.top #top .houmu-slide h1 .decorated::before { transform: translate(-20px, 0) rotate(-30deg); left: 0; }
body.top #top .houmu-slide h1 .decorated::after { transform: translate(20px, 0) rotate(30deg); right: 0; }
_:lang(x)::-ms-backdrop, body.top #top .houmu-slide h1 .decorated::before { left: calc(50% - 75px); } /* ie 11 */
body.top #top .houmu-slide h1 img { width: auto; height: 20px; }
body.top #top .houmu-slide > img,
body.top #top .houmu-slide > .bound img { border: 4px solid #ea5504; border-radius: 30px; box-sizing: border-box; }

body.top .billboard .slick-dots li button:before { text-shadow: none; }

body.top .billboard .houmu-slides .slide-prev,
body.top .billboard .houmu-slides .slide-next,
body.top .billboard .houmu-slides .slick-dots { opacity: 0; transition: .5s; }
body.top .billboard .houmu-slides.appeared .slide-prev,
body.top .billboard .houmu-slides.appeared .slide-next,
body.top .billboard .houmu-slides.appeared .slick-dots { opacity: 1; }

body.top #top .billboard .slide-01 > img { width: 310px; height: 214px; margin: 0 auto; }

body.top #top .slide-02 > .bound { width: 310px; height: 260px; margin: 0 auto; position: relative; }
body.top #top .slide-02 > .bound img { width: 310px; height: 214px; }
/* body.top #top .slide-02 > .bound img:nth-of-type(2) { position: absolute; bottom: 0; right: 0; z-index: -1; } */

body.top #top { margin-bottom: 30px; }



/* service
   ========================================================================== */

body.service .bordered ul li .block {
max-height: 2000px;
padding: 0 10px;
margin: 0 auto;
position: relative;
overflow: hidden;
opacity: 1;
z-index: 2;
}

body.service .bordered ul { perspective: 1000px; }
body.service .bordered ul li { border-bottom: 1px solid #e0dfdf; position: relative; }

body.service .bordered ul li i {
position: absolute;
right: 15px;
top: 20px;
}
body.service .bordered ul li i::before,
body.service .bordered ul li i::after {
content: '';
position: absolute;
background-color: #ea5504;
width: 1px;
height: 12px;
}
body.service .bordered ul li i::before { transform: translate(-4px, 0) rotate(45deg); }
body.service .bordered ul li i::after { transform: translate(4px, 0) rotate(-45deg); }
body.service .bordered ul li input[type=checkbox]:checked ~ i::before { transform: translate(4px, 0) rotate(45deg); }
body.service .bordered ul li input[type=checkbox]:checked ~ i::after { transform: translate(-4px, 0) rotate(-45deg); }

body.service .bordered ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
body.service .bordered ul li input[type=checkbox]:checked ~ div {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}

body.service .bordered ul li .block,
body.service .bordered ul li i::before,
body.service .bordered ul li i::after { transition: all .25s ease-in-out; }

body.service .bordered h2 { color: #595757; font-size: 1.4rem; font-weight: 500; text-align: center; cursor: pointer; padding: 20px 20px 20px 0; }

body.service .bordered h4 { color: #ea5504; font-size: 1.4rem; font-weight: 500; }
body.service .bordered h5 { font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
body.service .bordered h4 ~ h5 { margin-top: 20px; }
body.service .bordered h5 ~ h4 { margin-top: 45px; }
body.service .bordered h5::before { content: '◯'; }
body.service .bordered p { font-size: 1.3rem; font-feature-settings: 'palt'; }

body.service .bordered .block > h5:last-child,
body.service .bordered .block > p:last-child { margin-bottom: 40px; }
body.service .bordered .block > svg { display: block; width: 20px; height: 30px; fill: none; stroke: #707070; margin: -10px auto 20px; }
body.service .bordered .block > img { display: block; width: 100%; height: auto; margin: 0 auto 30px; }

body.service.index img { border-radius: 20px; }

body.service footer { border-top: none; margin-top: 0; }



/* news
   ========================================================================== */

body.houmu.news .article-header h1 { display: flex; }
body.houmu.news .article-header h1 > .text > .heading { font-family: 'Noto Sans CJK JP', sans-serif; font-size: 1.7rem; font-weight: 100; }
body.houmu.news .article-header h1 > .text > .sub { font-family: 'Noto Sans CJK JP', sans-serif; font-size: .9rem; font-weight: 350; margin-top: 3px; }
body.houmu.news p { font-feature-settings: 'palt'; }



/* access
   ========================================================================== */

body.access .article-header { margin-bottom: 10px; }

body.access .styled table th,
body.access .styled table td,
body.access .styled table tr:first-child th,
body.access .styled table tr:first-child td { border: none; }

body.access .styled table tr { border-bottom: 1px solid #e0dfdf; }
body.access .styled table tr:last-child { border-bottom: none; }

body.access .styled table th,
body.access .styled table td { display: table-cell;  padding: 10px; }
body.access .styled table th { font-size: 1.4rem; }
body.access .styled table th .sub { font-size: .9rem; }
body.access .styled table td { font-size: 1.2rem; }
body.access .styled table td b { font-size: 1.4rem; font-weight: 700; }

body.access .styled table.overview th { width: 30%; }
body.access .styled table.overview td { width: 70%; }
body.access .styled table.overview td > span { display: block; margin-top: 7px; }
body.access .styled table.overview td > span:first-child { margin-top: 0; }
body.access .styled table.overview td > span > span { display: inline-block; vertical-align: top; margin-right: 5px; }

body.access .styled table hr { height: 1px; border-top: 1px solid #e0dfdf; margin-top: 10px; }

body.access #access nav.lnav.switchable ul { display: flex; border-top: 1px solid #e0dfdf; border-bottom: 1px solid #e0dfdf; }
body.access #access nav.lnav.switchable ul li { width: 50%; }
body.access #access nav.lnav.switchable ul li a { display: flex; justify-content: center; align-items: center; height: 80px; background-color: #e0dfdf; transition: .25s; }
body.access #access nav.lnav.switchable ul li:first-child a { border-right: 1px solid #e0dfdf; }
body.access #access nav.lnav.switchable span { color: #595757; font-size: 1.4rem; font-weight: 700; line-height: 1.4; opacity: .5; }
body.access #access nav.lnav.switchable ul li a:hover,
body.access #access nav.lnav.switchable ul li a.selected { background-color: #fff; }
body.access #access nav.lnav.switchable ul li a:hover span,
body.access #access nav.lnav.switchable ul li a.selected span { opacity: 1; }



/* contact
   ========================================================================== */

body.contact .article-header { margin-bottom: 40px; }
body.contact .article-body { border-top: none; }

body.contact .article-body .bound { width: 285px; margin: 0 auto; }
body.contact .article-body .bound .contact { display: flex; align-items: center; color: #ea5504; font-family: 'Noto Serif CJK JP', serif; font-size: 3.6rem; font-weight: 500; line-height: 1; margin-bottom: 20px; }
body.contact .article-body .bound .contact .sub { color: #595757; font-family: 'Noto Sans CJK JP', sans-serif; font-size: 2rem; font-weight: 700; margin: 5px 10px 0 0; }



/* feature
   ========================================================================== */

body.feature .article-header.billboard { height: 400px; margin-bottom: 30px; }
body.feature .article-header.billboard h1 { margin-bottom: 0; }
body.feature.yuigon .article-header.billboard { background-color: #ffe96e; }
body.feature.souzoku .article-header.billboard { background-color: #ffc400; }
body.feature .article-header.billboard .feature { margin: 0 auto; position: absolute; top: 40px; left: calc(50% - 155px); }
body.feature .article-header.billboard .feature > img { display: block; width: auto; height: 50px; margin: 0 auto; }

body.feature.yuigon .article-body,
body.feature.souzoku .article-body { border-top: none; }

body.feature #solution { background-color: #ffedcb; padding: 0 10px; box-sizing: border-box; }

body.feature #solution > .inner { padding: 20px 0 200px; margin: 0 auto; }

body.feature #solution > .inner h1 { display: flex; align-items: center; flex-direction: column; }
body.feature #solution > .inner h1 > span { display: block; }
body.feature #solution > .inner h1 .sub.decorated { width: 140px; color: #ea5504; font-size: 1.4rem; font-weight: 500; line-height: 1.2; text-align: center; margin: 0 auto; position: relative; margin-bottom: 10px; }
body.feature #solution > .inner h1 .sub.decorated::before,
body.feature #solution > .inner h1 .sub.decorated::after { content: ''; background-color: #ea5504; width: 1px; height: 40px; position: absolute; top: -5px; }
body.feature #solution > .inner h1 .sub.decorated::before { transform: translate(-20px, 0) rotate(-30deg); left: 0; }
body.feature #solution > .inner h1 .sub.decorated::after { transform: translate(20px, 0) rotate(30deg); right: 0; }
_:lang(x)::-ms-backdrop, body.feature #solution > .inner h1 .sub.decorated::before { left: calc(50% - 70px); } /* ie 11 */

body.feature #solution > .inner h1 .heading { font-size: 4.2rem; font-weight: 700; }

body.feature.yuigon #solution .bound { margin-top: 60px; }
body.feature.souzoku #solution .bound { margin-top: 40px; }

body.feature #solution .bound .block { display: flex; align-items: center; background-color: #fff; border: 6px solid #707070; border-radius: 30px; margin-bottom: 40px; position: relative; }

body.feature #solution .bound .block:last-of-type { margin-bottom: 0; }

body.feature #solution .bound .block .inner { padding: 25px 20px 30px; }
body.feature #solution .bound .block h3 { min-height: 48px; color: #ea5504; font-size: 2rem; font-weight: 700; line-height: 1.2; padding-left: 75px; margin-bottom: 20px; }
body.feature.souzoku #solution .bound .block h3 { padding-left: 0; }

body.feature #solution .bound .block p { font-size: 1.4rem; font-weight: 500; line-height: 1.4; }

body.feature #solution .bound .block .shoulder { position: absolute; }

body.feature #solution .bound .block .shoulder { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100px; height: 100px; background-color: #fff; border: 6px solid #ea5504; border-radius: 50px; box-sizing: border-box; position: absolute; top: -20px; left: -15px; }
body.feature #solution .bound .block .shoulder .heading { width: 100px; color: #ea5504; font-size: 5rem; font-weight: 500; line-height: 1; text-align: center; }
body.feature #solution .bound .block .shoulder .sub { font-size: 1.3rem; font-weight: 900; }

body.feature #cases { width: 100%; padding: 0 10px; box-sizing: border-box; }

/* yuigon */
body.feature.yuigon #cases > h1 { display: flex; justify-content: center; align-items: center; }
body.feature.yuigon #cases > h1 .sub { display: flex; justify-content: center; align-items: center; flex: 0 0 80px; width: 80px; height: 57px; color: #fff; font-size: 1.4rem; font-weight: 700; background: url(/media/houmu/bg_yuigon_cases_h1.svg) no-repeat 0 0; background-size: 80px auto; margin-right: 10px; transform: rotate(-10deg); }
body.feature.yuigon #cases > h1 .heading { color: #ea5504; font-size: 2.8rem; font-weight: 300; }

body.feature #cases > p { font-size: 1.4rem; font-weight: 500; line-height: 1.4; text-align: center; margin-top: 60px; }
body.feature #cases > p strong { color: #ea5504; font-weight: 500; }

body.feature.yuigon #cases > p.enlarged { font-size: 2.8rem; font-weight: 300; margin-top: 20px; }

body.feature #cases > p.enlarged strong { font-weight: 300; }

body.feature.yuigon #cases .bound { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px; }
body.feature.yuigon #cases .bound > div { width: 100%; height: 360px; background-repeat: no-repeat; background-position: center bottom; background-color: #ffc400; background-size: auto 200px; border: 4px solid #ffe96e; border-radius: 30px; margin-bottom: 40px; box-sizing: border-box; position: relative; }
body.feature.yuigon #cases .bound > div h3 { display: flex; align-items: center; height: 85px; position: relative; }
body.feature.yuigon #cases .bound > div h3 .heading { display: block; font-size: 1.7rem; font-weight: 500; line-height: 1.4; padding: 20px 20px 20px 100px; }
body.feature.yuigon #cases .bound > div h3 .sub { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100px; height: 100px; background-color: #ffc400; border: 13px solid #ffe96e; border-radius: 50px; box-sizing: border-box; position: absolute; top: -20px; left: -15px; }
body.feature.yuigon #cases .bound > div h3 .sub span { width: 100px; font-size: 5rem; font-weight: 500; line-height: 1; text-align: center; }
body.feature.yuigon #cases .bound > div h3 .sub span:first-child { font-size: .9rem; font-weight: 700; }
body.feature.yuigon #cases .bound > div p { font-size: 1.3rem; font-weight: 300; line-height: 1.8; padding: 0 20px; margin-top: 10px; }

body.feature.yuigon #cases .bound .case-01 { background-image: url(/media/houmu/image_yuigon_01.png); }
body.feature.yuigon #cases .bound .case-02 { background-image: url(/media/houmu/image_yuigon_02.png); }
body.feature.yuigon #cases .bound .case-03 { background-image: url(/media/houmu/image_yuigon_03.png); }
body.feature.yuigon #cases .bound .case-04 { background-image: url(/media/houmu/image_yuigon_04.png); }
body.feature.yuigon #cases .bound .case-05 { background-image: url(/media/houmu/image_yuigon_05.png); }
body.feature.yuigon #cases .bound .case-06 { background-image: url(/media/houmu/image_yuigon_06.png); }

body.feature #cases > img { display: block; width: auto; height: 50px; margin: 0 auto 20px; }

/* souzoku */
body.feature.souzoku #cases > h1 { font-size: 2.8rem; font-weight: 300; text-align: center; margin-bottom: 30px; }

body.feature.souzoku #cases > p { margin-top: 20px; }

body.feature.souzoku #cases > p.enlarged { font-size: 2.8rem; font-weight: 300; margin-top: 15px; }
body.feature.souzoku #cases > p.enlarged:last-of-type { margin-bottom: 20px; }

body.feature.souzoku #cases h2.decorated { width: 140px; color: #ea5504; font-size: 1.4rem; font-weight: 500; text-align: center; margin: 0 auto; position: relative; margin: 50px auto 30px; }
body.feature.souzoku #cases h2.decorated::before,
body.feature.souzoku #cases h2.decorated::after { content: ''; background-color: #ea5504; width: 1px; height: 40px; position: absolute; top: -5px; }
body.feature.souzoku #cases h2.decorated::before { transform: translate(-20px, 0) rotate(-30deg); left: 0; }
body.feature.souzoku #cases h2.decorated::after { transform: translate(20px, 0) rotate(30deg); right: 0; }
_:lang(x)::-ms-backdrop, body.feature.souzoku #cases h2.decorated::before { left: calc(50% - 70px); } /* ie 11 */

body.feature.souzoku #cases .bound:first-of-type { display: flex; flex-wrap: wrap; width: 300px; margin: 0 auto; }
body.feature.souzoku #cases .bound > p.block { width: 150px; height: 150px; font-size: 1.2rem; font-weight: 500; line-height: 1.4; text-align: center; background-repeat: no-repeat; background-position: center top; background-size: auto 120px; padding-top: 115px; margin-bottom: 20px; box-sizing: border-box; }
body.feature.souzoku #cases .bound > p.block:nth-of-type(1) { background-image: url(/media/houmu/image_souzoku_01.png); }
body.feature.souzoku #cases .bound > p.block:nth-of-type(2) { background-image: url(/media/houmu/image_souzoku_02.png); }
body.feature.souzoku #cases .bound > p.block:nth-of-type(3) { background-image: url(/media/houmu/image_souzoku_03.png); }
body.feature.souzoku #cases .bound > p.block:nth-of-type(4) { background-image: url(/media/houmu/image_souzoku_04.png); }

body.feature.souzoku #cases .bound > div { background-color: #ffc400; border: 4px solid #ffe96e; border-radius: 30px; padding: 25px 20px; margin-bottom: 20px; box-sizing: border-box; position: relative; }
body.feature.souzoku #cases .bound > div h3 { display: flex; font-size: 1.4rem; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
body.feature.souzoku #cases .bound > div h3::before { content: '■'; display: inline-block; width: 20px; flex: 0 0 20px; color: #fff; }
body.feature.souzoku #cases .bound > div p { font-size: 1.3rem; font-weight: 300; line-height: 1.8; }