@charset "utf-8";

/******************************************************************
 *
 * 個別ページ
 *
 ******************************************************************/



 /*******************************************************************/


@media screen and (min-width:751px){/* PC */

.c1 { width: 1080px; margin: 0 auto; padding: 80px 0 0 0; }
.c1 .inner { width: 880px; margin: 0 auto; }
.c1 .inner h3 {  padding: 60px 0 0 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 400; font-size: 24px; color: #333;  }
.c1 .inner h3 span { padding: 0 0.25em 0 0; color: rgba(255,217,6,1.0); }

.c1 .child1 { position: relative; margin: 30px auto 0 auto; width: 880px; height: 280px; background: url("../images/work/c1_bg1_pc.jpg") center top no-repeat; background-size: contain; color: rgba(255,255,255,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child1>div { position: absolute; left: 40px; top: 36px; width: 300px; height: 180px; }
.c1 .child1>div h4 { font-size: 32px; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child1>div p { font-size: 17px; line-height: 1.5em; }
.c1 .child1>div p+p { padding: 0.5em 0 0 0; }
.c1 .child1>div p span { color: rgba(2,89,79,1.0); }

.c1 .child2 { position: relative; margin: 30px auto 0 auto; width: 880px; height: 280px; background: url("../images/work/c1_bg2_pc.jpg") center top no-repeat; background-size: contain; color: rgba(48,160,147,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child2>div { position: absolute; left: 560px; top: 36px; width: 300px; height: 180px; }
.c1 .child2>div h4 { font-size: 32px; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child2>div p { font-size: 17px; line-height: 1.5em; }
.c1 .child2>div p+p { padding: 0.5em 0 0 0; }
.c1 .child2>div p span { color: rgba(255,255,255,1.0); }

.c1 .child3 { position: relative; margin: 30px auto 0 auto; width: 880px; height: 280px; background: url("../images/work/c1_bg3_pc.jpg") center top no-repeat; background-size: contain; color: rgba(255,255,255,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child3>div { position: absolute; left: 40px; top: 36px; width: 300px; height: 180px; }
.c1 .child3>div h4 { font-size: 32px; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child3>div p { font-size: 17px; line-height: 1.5em; }
.c1 .child3>div p+p { padding: 0.5em 0 0 0; }
.c1 .child3>div p span { color: rgba(2,89,79,1.0); }

.c1 .inner > p { padding: 30px 0 0 0; }
.c1 .inner > .graph { padding: 30px 0 0 0; }


.c2 { width: 1080px; margin: 0 auto; padding: 80px 0 0 0; }
.c2 .inner { padding: 20px 0 0 0; }
.c2 .inner .child { position: relative; width: 880px; margin: 20px auto 0 auto; border: 1px solid rgba(208,225,223,1.0); border-radius: 15px; overflow: hidden; }
.c2 .inner .child ul { display: flex; flex-wrap: wrap; justify-content: flex-start; font-weight: 500; }
.c2 .inner .child ul li { padding: 0.5em 1em; width: 110px; border-right: 3px solid rgba(48,160,147,1.0); background: rgba(234,245,244,1.0); }
.c2 .inner .child ul li+li { width: auto; border-right: none; background: rgba(255,255,255,1.0); color: rgba(48,160,147,1.0); }
.c2 .inner .child ul li span { display: inline-block; margin: 5px 0 0 0; padding: 0 0 0 25px; font-size: 16px; line-height: 20px; background: url("../images/work/c2_icon.png") left center no-repeat; background-size: contain; color: rgba(48,160,147,1.0); }
.c2 .inner .child ul li strong { font-size: 23px; color: rgba(48,160,147,1.0); }
.c2 .inner .child p { padding: 1em; border-top: 1px solid rgba(208,225,223,1.0); }


}/*@media*/

 /*******************************************************************/

@media screen and (max-width:750px){/* SP */

.c1 { position: relative; width: 100%; margin: 0 auto; padding: 10.66vw 0 0 0; }
.c1 .inner { width: 100%; margin: 0 auto; }
.c1 .inner h3 { width: 86.66%; margin: 0 auto;  padding: 8vw 0 0 0; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 400; font-size: 4.8vw; color: #333;  }
.c1 .inner h3 span { padding: 0 0.25em 0 0; color: rgba(255,217,6,1.0); }

.c1 .child1 { position: relative; margin: 5.33vw auto 0 auto; width: 100%; height: 85.6vw; background: url("../images/work/c1_bg1_sp.jpg") right top no-repeat; background-size: contain; color: rgba(255,255,255,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child1>div { position: absolute; left: 14vw; top: 7.33vw; width: 54.8vw; height: 35.2vw; }
.c1 .child1>div h4 { font-size: 5.73vw; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child1>div p { font-size: 3.06vw; line-height: 1.5em; }
.c1 .child1>div p+p { padding: 0.5em 0 0 0; }
.c1 .child1>div p span { color: rgba(2,89,79,1.0); }

.c1 .child2 { position: relative; margin: 5.33vw auto 0 auto; width: 100%; height: 85.6vw; background: url("../images/work/c1_bg2_sp.jpg") left top no-repeat; background-size: contain; color: rgba(48,160,147,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child2>div { position: absolute; left: 38.66vw; top: 7.33vw; width: 54.8vw; height: 35.2vw; }
.c1 .child2>div h4 { font-size: 5.73vw; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child2>div p { font-size: 3.06vw; line-height: 1.5em; }
.c1 .child2>div p+p { padding: 0.5em 0 0 0; }
.c1 .child2>div p span { color: rgba(255,255,255,1.0); }

.c1 .child3 { position: relative; margin: 5.33vw auto 0 auto; width: 100%; height: 85.6vw; background: url("../images/work/c1_bg3_sp.jpg") right top no-repeat; background-size: contain; color: rgba(255,255,255,1.0); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
.c1 .child3>div { position: absolute; left: 14vw; top: 7.33vw; width: 54.8vw; height: 35.2vw; }
.c1 .child3>div h4 { font-size: 5.73vw; line-height: 1.25em; padding: 0 0 0.5em 0; font-weight: 700; }
.c1 .child3>div p { font-size: 3.06vw; line-height: 1.5em; }
.c1 .child3>div p+p { padding: 0.5em 0 0 0; }
.c1 .child3>div p span { color: rgba(2,89,79,1.0); }

.c1 .inner > p { width: 86.66%; margin: 0 auto; padding: 5.33vw 0 0 0; }
.c1 .inner > .graph { width: 86.66%; margin: 0 auto; padding: 5.33vw 0 0 0; }


.c2 { position: relative; width: 100%; margin: 0 auto; padding: 10.66vw 0 0 0; }
.c2 .inner { padding: 2.66vw 0 0 0; }
.c2 .inner .child { position: relative; width: 86.66%; margin: 4vw auto 0 auto; border: 1px solid rgba(208,225,223,1.0); border-radius: 2vw; overflow: hidden; }
.c2 .inner .child ul { display: flex; flex-wrap: wrap; justify-content: flex-start; font-weight: 500; }
.c2 .inner .child ul li { padding: 0.5em 1em; width: 25%; border-right: 0.4vw solid rgba(48,160,147,1.0); background: rgba(234,245,244,1.0); }
.c2 .inner .child ul li+li { width: auto; border-right: none; background: rgba(255,255,255,1.0); color: rgba(48,160,147,1.0); }
.c2 .inner .child ul li span { display: inline-block; margin: 0 0 0 0; padding: 0 0 0 25px; font-size: 3.00vw; line-height: 3.6vw; background: url("../images/work/c2_icon.png") left center no-repeat; background-size: contain; color: rgba(48,160,147,1.0); }
.c2 .inner .child ul li strong { font-size: 3.6vw; color: rgba(48,160,147,1.0); }
.c2 .inner .child p { padding: 1em; border-top: 1px solid rgba(208,225,223,1.0); }






}/*@media*/