@charset "UTF-8";

/* --
@import url("common.css");縲€
-- */


/* ----- GOOGLE FONTS ----- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* ----- RESET ----- */
*,:before,:after{margin:0;padding:0;border-width:0;border-style:solid;font-style:inherit;font-weight:inherit;}
html{overflow-y:scroll;line-height:0;text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
h1,h2,h3,h4,h5,h6{font-size:inherit;}
a{color:inherit;text-decoration:none;background-color:transparent;}
ul,ol,li{list-style:none;}
button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;border-radius:0;text-align:inherit;text-transform:inherit;}
button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;}
button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default;}
select:disabled{opacity:inherit;}
label[for]{cursor:pointer;}
table{border-color:inherit;border-spacing:0;border-collapse:collapse;}
caption,th,td{text-align:left;vertical-align:top;}
details{display:block;}
summary{display:list-item;}
sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
svg,img,embed,object,iframe{vertical-align:top;}
pre,code,kbd,samp{font-size:inherit;font-family:monospace,monospace;}
hr,legend{display:none;}

/* ----- BASIC ----- */
/*A Style*/  
a{text-decoration:underline;color:#333333;}
a:hover{text-decoration:underline;color:#666666;}
/*font*/
.noto-sans{font-family:"Noto Sans JP",sans-serif;font-style:normal;}
.noto-serif{font-family:"Noto Serif JP",serif;font-style:normal;}
.zen-old{font-family:"Zen Old Mincho",serif;font-style:normal;}
.figtree{font-family:"Figtree",sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:800;}
.bebas-neue{font-family:"Bebas Neue",sans-serif;font-weight:400;font-style:normal;}
.oswald{font-family:"Oswald",sans-serif;font-style:normal;}
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background:linear-gradient(transparent 70%, #fff799 0%)}
.red{color:#d0102c;}
.pc{display:block;}
.sp{display:none;}

img.pc{display:block;margin:0 auto;padding:0;width:100%;}
img.sp{display:none;}

.mx2000{max-width:2000px;}
.mx1500{max-width:1500px;}
.mx1250{max-width:1250px;}
.mx1000{max-width:1000px;}
.mx768{max-width:768px;}
.mx750{max-width:750px;}

@media only screen and (max-width:750px){
.pc{display:none;}
.sp{display:block;}
}


@media only screen and (max-width:750px){
img.pc{display:none;}
img.sp{display:block;margin:0 auto;padding:0;width:100%;}
}





/* --------------------------
 COMMON
-------------------------- */
/* HTML,BODY ------------- */
html,body{
position:relative;
width:100%;
margin:0;
padding:0;
font-family:'Noto Sans JP',Sans-Serif;
font-weight:400;
color:#333333;
font-size:16px;
line-height:0;
text-align:left;
letter-spacing:0;
word-break:break-all;
word-wrap:break-word;
background:#ffffff;
}

/* VIDEO_BG -------------- */
.video_bg{
position:fixed;
min-width:100%;
min-height:100%;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
background:url(../video/background.png) no-repeat center;
background-size:cover;
}
/* TOPBAR ---------------- */
#topbar{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
margin:0;
padding:0;
background:#ffffff;
box-shadow:0px 0px 20px 0px rgba(0,0,0,0.1);
z-index:100;
box-sizing:border-box;
}
#topbar_logo{
display:block;
margin:0 auto 0 0;
padding:20px;
}
#topbar_logo a{
display:inline-block;
margin:0 0 0 auto;
padding:0;
}
#topbar_logo a img{
display:inline-block;
width:auto;
height:30px;
}
@media only screen and (max-width:750px){
#topbar{height:40px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);}
#topbar_logo{padding:10px;}
#topbar_logo a{}
#topbar_logo a img{height:20px;}
}


/* MENU ------------------ */
#menu{
position:absolute;
top:20px;
right:20px;
}
.menu_icon{
position:relative;
display:block;
margin:0;
padding:0;
width:30px;
height:30px;
cursor:pointer;
transform:translateX(0);
transition:0.5s;
z-index:100;
}
.menu_icon.active{transform:translateX(-300px);}
.menu_icon span,.menu_icon span:before,.menu_icon span:after{
content:"";
position:absolute;
display:block;
width:24px;
height:2px;
border-radius:2px;
background:#666666;
}
.menu_icon span{top:14px;left:3px;}
.menu_icon span:before{top:7px;left:0;}
.menu_icon span:after{bottom:7px;left:0;}
.menu_icon.active span{background:transparent;}
.menu_icon.active span:before{top:0;transform:rotate(-45deg);}
.menu_icon.active span:after{bottom:0;transform:rotate(45deg);}
#side_nav{
position:fixed;
top:0;
right:0;
margin:0;
padding:0;
width:300px;
height:100%;
background:#ffffff;
z-index:20;
transform:translateX(100%);
transition:all .5s;
box-sizing:border-box;
}
#side_nav.open{
box-shadow:0px 0px 20px 0px rgba(0,0,0,0.1);
transform:translateX(0);
}
#side_nav ul{
margin:0;
padding:0;
width:100%;
list-style:none;
}
#side_nav li{
margin:0;
padding:0;
width:100%;
height:40px;
border-bottom:1px solid #eeeeee;
}
#side_nav li a{
position:relative;
display:block;
margin:0;
padding:10px 20px;
width:100%;
height:40px;
font-size:14px;
line-height:20px;
font-weight:700;
color:#000000;
background:#ffffff;
text-align:left;
text-decoration:none;
box-sizing:border-box;
}
#side_nav li a.menu_btn{
color:#ffffff;
background:#17b79d;
}
#side_nav li a:hover{
color:#ffffff;
text-decoration:none;
background:#000000;
}
#side_nav li a.menu_btn:hover{
background:#0e8989;
}
#side_nav li a.menu_btn:before{
content:"";
position:absolute;
top:15px;
right:20px;
display:block;
width:20px;
height:5px;
border-bottom:1px solid #ffffff;
border-right:2px solid #ffffff;
transform:skew(45deg);
transition:all .2s;
z-index:10;
}
#side_nav li a.menu_btn:hover:before{right:10px;}
.overlay{
display:block;
width:0;
height:0;
position:fixed;
top:0;
left:0;
}
.overlay.open{
width:100%;
height:100%;
background:rgba(255,255,255,0.75);
cursor:pointer;
}
@media only screen and (max-width:750px){
#menu{top:10px;right:10px;}
.menu_icon{width:20px;height:20px;}
.menu_icon.active{}
.menu_icon span,.menu_icon span:before,.menu_icon span:after{width:20px;}
.menu_icon span{top:9px;left:0;}
.menu_icon span:before{top:5px;}
.menu_icon span:after{bottom:5px;}
.menu_icon.active span{}
.menu_icon.active span:before{}
.menu_icon.active span:after{}
}

/* FOOTER ---------------- */
footer{
position:relative;
margin:0;
padding:40px 0 40px 0;
width:100%;
color:#e0e0e0;
background:#111111;
}
footer a{color:#e0e0e0;text-decoration:none;}
footer a:hover{color:#e0e0e0;text-decoration:underline;}
#nav_footer{
display:block;
width:100%;
max-width:750px;
margin:0 auto;
}
#nav_footer ul{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:flex-start;
width:100%;
text-align:center;
list-style-type:none;
box-sizing:border-box;
}
#nav_footer ul li{
display:block;
font-size:12px;
line-height:20px;
margin:0;
padding:0 20px;
border-left:1px solid #ed2f06;
}
#nav_footer ul li:first-child{border-left:none;}
footer small{
display:block;
margin:20px 0 0 0;
padding:0;
text-align:center;
font-size:12px;
line-height:20px;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
footer{}
#nav_footer{}
#nav_footer ul{display:block;padding:0 4%;text-align:left;}
#nav_footer ul li{width:100%;margin:0 0 10px 0;padding:0 0 0 4px;}
#nav_footer ul li:first-child{border-left:1px solid #ed2f06;}
footer small{margin:0;padding:0 4%;text-align:right;}
}

/* SECTION --------------- */
.section{
position:relative;
width:100%;
margin:0;
padding:120px 0 120px 0;
}
.section_wrapper{
position:relative;
display:block;
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.section_box{
width:100%;
margin:0 auto;
padding:0 4%;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
.section{padding:12vw 0 12vw 0;}
.section_wrapper{}
.section_box{}
}

/* SECTION_TITLE --------- */
.section_title{
position:relative;
display:block;
width:100%;
max-width:1250px;
margin:0 auto 60px auto;
}
.section_title h2{
dispay:block;
width:100%;
margin:0 auto 30px auto;
padding:0 4%;
font-size:30px;
line-height:40px;
font-weight:700;
text-align:center;
z-index:10;
box-sizing:border-box;
}
.section_title:after{
content:"";
position:relative;
display:block;
margin:0 auto;
width:0;
height:10px;
background:url(../img/title_hr.png) no-repeat center top;
background-size:auto 100%;
animation:title_hr 0.5s linear 0s forwards;
}
@keyframes title_hr{
0%{width:0;}
100%{width:100px;}
}
@media only screen and (max-width:1250px){
.section_title{margin:0 auto 4.8vw auto;}
.section_title h2{margin:0 auto 2.4vw auto;font-size:2.4vw;line-height:3.2vw;}
.section_title:after{height:0.8vw;}
}
@media only screen and (max-width:750px){
.section_title{margin:0 auto 40px auto;}
.section_title h2{margin:0 auto 20px auto;font-size:20px;line-height:30px;}
.section_title:after{height:5px;}
}






/* --------------------------
 MV
-------------------------- */
.mv{
position:relative;
display:block;
width:100%;
margin:0;
padding:0;
text-align:center;
box-sizing:border-box;
}
.mv_wrapper{
display:block;
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
}
.mv_box{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
width:100%;
margin:0 auto;
padding:90px 0 90px 0;
box-sizing:border-box;
}
#topbar + .mv .mv_box{padding:160px 0 90px 0;}
/* MV_COPY ----- */
.mv_copy{
position:relative;
display:block;
width:40%;
margin:0 0 0 4%;
padding:0;
box-sizing:border-box;
}
.mv_copy h1{
display:block;
width:100%;
margin:0;
padding:0;
font-size:40px;
line-height:70px;
font-family:"Zen Old Mincho",serif;
font-weight:800;
text-align:left;
color:#000000;
letter-spacing:1px;
}
.mv_copy h1 span.big{font-size:60px;}

/* MV_LOGO ----- */
.mv_logo{
display:block;
width:100%;
margin:0;
}
.mv_logo img{
display:block;
width:100%;
margin:0 0 0 auto;
}
.mv_logo dl{
display:block;
width:100%;
margin:0;
padding:0;
text-align:right;
line-height:40px;
font-weight:900;
letter-spacing:2px;
}
.mv_logo dt{font-size:24px;}
.mv_logo dd{font-size:18px;}

/* MV_IMG ----- */
.mv_img{
width:48%;
margin:0 4%;
padding:0;
box-sizing:border-box;
}
.rdv{
position:relative;
width:100%;
max-width:600px;
max-height:360px;
margin:0 auto;
padding-top:60%;
}
.rdv_img{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
max-width:600px;
height:100%;
max-height:360px;
box-sizing:border-box;
animation:rdv_img-anim 50s linear backwards infinite;
}
@keyframes rdv_img-anim{
0%{opacity:0;}
1%{opacity:1;}
4%{opacity:1;}
5%{opacity:0;}
100%{opacity:0;}
}
.rdv_img:nth-of-type(1){animation-delay:0s;}
.rdv_img:nth-of-type(2){animation-delay:2s;}
.rdv_img:nth-of-type(3){animation-delay:4s;}
.rdv_img:nth-of-type(4){animation-delay:6s;}
.rdv_img:nth-of-type(5){animation-delay:8s;}
.rdv_img:nth-of-type(6){animation-delay:10s;}
.rdv_img:nth-of-type(7){animation-delay:12s;}
.rdv_img:nth-of-type(8){animation-delay:14s;}
.rdv_img:nth-of-type(9){animation-delay:16s;}
.rdv_img:nth-of-type(10){animation-delay:18s;}
.rdv_img:nth-of-type(11){animation-delay:20s;}
.rdv_img:nth-of-type(12){animation-delay:22s;}
.rdv_img:nth-of-type(13){animation-delay:24s;}
.rdv_img:nth-of-type(14){animation-delay:26s;}
.rdv_img:nth-of-type(15){animation-delay:28s;}
.rdv_img:nth-of-type(16){animation-delay:30s;}
.rdv_img:nth-of-type(17){animation-delay:32s;}
.rdv_img:nth-of-type(18){animation-delay:34s;}
.rdv_img:nth-of-type(19){animation-delay:36s;}
.rdv_img:nth-of-type(20){animation-delay:38s;}
.rdv_img:nth-of-type(21){animation-delay:40s;}
.rdv_img:nth-of-type(22){animation-delay:42s;}
.rdv_img:nth-of-type(23){animation-delay:44s;}
.rdv_img:nth-of-type(24){animation-delay:46s;}
.rdv_img:nth-of-type(25){animation-delay:48s;}
.mv_rdv{
position:relative;
display:block;
width:100%;
max-width:600px;
margin:0 auto;
}
@media only screen and (max-width:1250px){
.mv{}
.mv_wrapper{}
.mv_box{padding:7.2vw 0 7.2vw 0;}
#topbar + .mv .mv_box{padding:12.8vw 0 7.2vw 0;}
/* MV_COPY ----- */
.mv_copy{}
.mv_copy h1{font-size:3.2vw;line-height:5.6vw;letter-spacing:0.08vw;}
.mv_copy h1 span.big{font-size:4.8vw;}
/* MV_LOGO ----- */
.mv_logo{}
.mv_logo img{}
.mv_logo dl{line-height:3.2vw;letter-spacing:0.16vw;}
.mv_logo dt{font-size:1.92vw;}
.mv_logo dd{font-size:1.44vw;}
/* MV_IMG ----- */
.mv_img{}
.rdv{}
.rdv_img{}
.mv_rdv{}
}
@media only screen and (max-width:750px){
.mv{}
.mv_wrapper{}
.mv_box{display:block;margin:0 auto;padding:40px 0;}
#topbar + .mv .mv_box{padding:80px 0 40px 0;}
/* MV_COPY ----- */
.mv_copy{width:100%;margin:0 0 40px 0;padding:0 4%;}
.mv_copy h1{font-size:24px;line-height:50px;text-align:center;}
.mv_copy h1 span.big{font-size:40px;}
.mv_copy h1 span.row2{display:inline-block;padding:0 0 0 20px;}
/* MV_LOGO ----- */
.mv_logo{}
.mv_logo img{width:240px;margin:0 auto 20px auto;}
.mv_logo dl{line-height:30px;text-align:center;letter-spacing:2px;}
.mv_logo dt{font-size:18px;}
.mv_logo dd{font-size:12px;}
/* MV-CTA ----- */
.mv-cta .mv_logo{}
.mv-cta .mv_logo img{}
.mv-cta .mv_logo dl{line-height:30px;}
.mv-cta .mv_logo dt{font-size:18px;}
.mv-cta .mv_logo dd{font-size:12px;}
/* MV_IMG ----- */
.mv_img{width:100%;margin:0;padding:0 4%;}
.rdv{}
.rdv_img{}
.mv_rdv{}
}

/* --------------------------
 CTA
-------------------------- */
.cta{
position:relative;
width:100%;
margin:0;
padding:0 0 80px 0;
text-align:center;
box-sizing:border-box;
}
.cta_wrapper{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch;
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
text-align:center;
box-sizing:border-box;
}
.cta_box{
width:44%;
margin:0 0 0 4%;
padding:0;
box-sizing:border-box;
}
/*PLAN----------*/
dl.cta_plan{
position:relative;
display:block;
margin:0;
padding:0;
}
dl.cta_plan dt{
position:relative;
display:block;
margin:0;
padding:0 0 1px 0;
font-size:16px;
line-height:29px;
font-weight:600;
color:#ffffff;
background:#111111;
}
dl.cta_plan dd{
margin:0;
padding:0 0 20px 0;
font-size:16px;
line-height:30px;
font-weight:300;
color:#111111;
background:linear-gradient(to bottom,rgba(255,255,255,0.9),rgba(255,255,255,0));
}
.cta_icon{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
margin:0 auto 20px auto;
padding:10px 0 0 0;
}
.cta_icon img{
display:block;
width:60px;
padding:0 5px;
}
/*PRICE----------*/
.price{
margin:-10px 0 10px 0;
padding:0;
color:#111111;
box-sizing:border-box;
}
.price span:nth-of-type(1){
display:inline-block;
margin:0 1px 0 0;
font-family:"Oswald",sans-serif;
font-weight:500;
font-style:normal;
font-size:40px;
line-height:50px;
letter-spacing:-1px;
}
.price span:nth-of-type(2){
display:inline-block;
font-size:24px;
line-height:30px;
font-weight:900;
vertical-align:3px;
}
.price span:nth-of-type(3){
display:inline-block;
margin:0 0 0 3px;
padding:0 1px 1px 1px;
font-size:14px;
line-height:19px;
font-weight:900;
border:2px solid #111111;
vertical-align:6px;
}
.price span:nth-of-type(4){
display:inline-block;
font-size:24px;
line-height:30px;
font-weight:900;
vertical-align:3px;
}

/*BTN----------*/
.cta_btn{
position:relative;
display:block;
width:100%;
max-width:330px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.cta_btn a{
position:relative;
display:block;
width:100%;
height:70px;
margin:0 auto;
padding:20px 0;
font-size:20px;
line-height:30px;
font-weight:700;
text-align:center;
text-decoration:none;
color:#ffffff;
background:linear-gradient(to right,#e7fe94,#17b79d);
box-shadow:0 20px 20px 0 rgba(170,218,214,0.8);
border-radius:10px;
overflow:hidden;
box-sizing:border-box;
}
.cta_btn a:hover{
background:#0e8989;
box-shadow:none;
}
.cta_btn:before{
content:"";
position:absolute;
top:30px;
right:20px;
display:block;
width:20px;
height:5px;
border-bottom:2px solid #ffffff;
border-right:3px solid #ffffff;
transform:skew(45deg);
transition:all .2s;
z-index:10;
}
.cta_btn:hover:before{right:10px;}
/*PAYMENT----------*/
.payment{
margin:40px auto 0 auto;
font-size:16px;
line-height:30px;
text-align:center;
color:#333333;
}
.payment_icon{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
margin:5px auto 0 auto;
width:100%;
max-width:750px;
}
.payment_icon img{
display:block;
height:40px;
margin:0;
padding:0 10px;
}
.payment p{margin:0;padding:0;}
p.hr{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
margin:0;
padding:0;
font-size:16px;
line-height:30px;
font-weight:600;
color:#333333;
}
p.hr:before,p.hr:after{
content:"";
display:block;
flex:1;
height:2px;
padding:0;
}
p.hr:before{
margin:0 2% 0 0;
background:#000000;
}
p.hr:after{
margin:0 0 0 2%;
background:#000000;
}
@media only screen and (max-width:750px){
.cta{padding:0 0 40px 0;}
.cta_wrapper{display:block;}
.cta_box{width:100%;margin:0 auto 40px auto;padding:0 4%;}
/*PLAN----------*/
dl.cta_plan{}
dl.cta_plan dt{font-size:14px;}
dl.cta_plan dd{font-size:14px;line-height:24px;}
.cta_icon{}
.cta_icon img{}
/*PRICE----------*/
.price{}
.price span:nth-of-type(1){font-size:30px;line-height:40px;}
.price span:nth-of-type(2){font-size:20px;}
.price span:nth-of-type(3){font-size:12px;line-height:14px;vertical-align:6px;}
/*BTN----------*/
.cta_btn{max-width:100%;}
.cta_btn a{height:60px;font-size:18px;line-height:20px;}
.cta_btn a:hover{}
.cta_btn:before{top:25px;}
.cta_btn:hover:before{right:10px;}
/*PAYMENT----------*/
.payment{font-size:14px;}
.payment_icon{}
.payment_icon img{height:30px;padding:0 5px;}
.payment p{}
p.hr{font-size:14px;}
p.hr:before,p.hr:after{}
p.hr:before{}
p.hr:after{}
}


/* --------------------------
 CASE
-------------------------- */
#case{
position:relative;
margin:0;
padding:20px 0 0 0;
background:url(../img/bg_02.png) repeat center top;
box-sizing:border-box;
}
#case h2{
dispay:block;
margin:0 4% 20px 4%;
padding:10px;
font-size:18px;
line-height:20px;
font-weight:700;
text-align:center;
color:#ffffff;
background:#111111;
box-sizing:border-box;
}
.case_wrapper{
display:flex;
align-items:center;
width:100%;
padding:20px 0;
overflow-x:hidden;
}
.case_wrapper:hover .slider{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.slider{
position:relative;
display:flex;
-webkit-animation:loop-slide 60s infinite linear 1s both;
animation:loop-slide 60s infinite linear 1s both;
}
.slider a{
display:block;
width:200px;
margin:0 10px 0 0;
transition:all 0.2s;
background:#ffffff;
}
.slider a img{
display:block;
width:100%;
height:auto;
box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.slider a:hover{
cursor:pointer;
transform:translateY(-10px);
}
.slider a img:hover{opacity:0.5;}
@-webkit-keyframes loop-slide{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes loop-slide{from{transform:translateX(0);}to{transform: translateX(-100%);}}
/*CLIENT----------*/
#client{
position:relative;
margin:0;
padding:0;
box-sizing:border-box;
}
#client ul{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:flex-start;
width:100%;
margin:0 auto;
padding:0 4%;
box-sizing:border-box;
}
#client ul li{width:25%;}
#client ul li img{
display:block;
width:100%;
max-width:200px;
height:auto;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
/*BTN----------*/
.case_btn{
position:relative;
display:block;
width:200px;
margin:0 auto;
padding:0 0 20px 0;
}
.case_btn a{
position:relative;
display:block;
width:100%;
height:40px;
margin:0 auto;
padding:10px;
font-size:14px;
line-height:20px;
font-weight:700;
text-decoration:none;
color:#ffffff;
text-align:center;
outline:0;
background:#17b79d;
box-shadow:0 10px 20px 0 rgba(170,218,214,0.8);
border-radius:20px;
border:none;
overflow:hidden;
box-sizing:border-box;
}
.case_btn a:hover{background:#0e8989;box-shadow:none;}
.case_btn:before{
content:"";
position:absolute;
top:15px;
right:20px;
display:block;
width:15px;
height:5px;
border-bottom:1px solid #ffffff;
border-right:2px solid #ffffff;
transform:skew(45deg);
transition:all .2s;
z-index:10;
}
.case_btn:hover:before{right:10px;}
@media only screen and (max-width:750px){
#case{background-size:10px 10px;}
#case h2{font-size:14px;}
.case_wrapper{}
.case_wrapper:hover .slider{}
.slider{}
.slider a{width:150px;}
.slider a img{}
.slider a:hover{}
.slider a img:hover{}
/*CLIENT----------*/
#client{}
#client ul{}
#client ul li{width:33.3%;}
#client ul li img{max-width:120px;}
/*BTN----------*/
.case_btn{}
.case_btn a{}
.case_btn a:hover{}
.case_btn:before{}
.case_btn:hover:before{}
}





/* --------------------------
 POINT
-------------------------- */
#point{background:#f6f6f5;}

.point_wrapper{
position:relative;
display:flex;
flex-wrap:nowrap;
flex-direction:row;
justify-content:center;
align-items:stretch;
width:100%;
max-width:1250px;
margin:80px auto 0 auto;
padding:0;
box-sizing:border-box;
}


.point_box{
position:relative;
display:flex;
flex-direction:column;
flex-wrap:nowrap;
width:31.6%;
margin:0;
box-sizing:border-box;
}

.point_box:nth-of-type(1){padding:0 0 0 4%;order:1;justify-content:flex-start;}
.point_box:nth-of-type(2){padding:0 4% 0 0;order:3;justify-content:flex-end;}


.point_textbox{
position:relative;
display:block;
width:100%;
height:30%;
margin:0;
padding:0;
box-sizing:border-box;
}

.point_num{
position:relative;
display:block;
margin:0 auto;
padding:0 5px;
font-family:"Figtree",sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:700;
font-size:16px;
line-height:20px;
text-align:left;
letter-spacing:1px;
color:#ffffff;
background:#111111;
box-sizing:border-box;
}

.point_headline{
position:relative;
display:block;
margin:10px 0 0 0;
padding:0;
font-size:24px;
line-height:30px;
font-weight:900;
text-align:left;
}

.point_textbox p{
margin:10px 0 0 0;
padding:0;
font-size:16px;
line-height:30px;
text-align:justify;
letter-spacing:-1px;
}

.point_img{
position:relative;
display:block;
width:32.8%;
margin:0 1.6%;
box-sizing:border-box;
order:2;
}



@media only screen and (max-width:750px){
}






/* --------------------------
 FLOW_ver2
-------------------------- */
#flow{
margin:0;
padding:0;
background:#eeeeee;
}
#flow .section_wrapper{
display:block;
width:100%;
max-width:2000px;
margin:0 auto;
padding:0;
background:#ffffff url(../img/bg_03.png) repeat center top;
border-bottom:1px solid #eeeeee;
}
/* FLOW_YOUR ----- */
#flow_your{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:0;
}
h2.flow_your_title{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:80px 0 60px 0;
}
h2.flow_your_title img{
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
}
.flow_your_wrapper{
position:relative;
display:flex;
justify-content:stretch;
align-items:flex-start;
width:100%;
max-width:1250px;
margin:0 auto;
padding:0 0 50px 0;
box-sizing:border-box;
}
.flow_your_box{
position:relative;
display:block;
width:44%;
margin:50px 0 0 4%;
padding:0;
box-sizing:border-box;
border:1px solid #000000;
background:#ffffff;
}
.flow_your_icon{
position:relative;
display:block;
width:40%;
margin:0 auto;
padding-top:10%;
}
.flow_your_icon span{
position:absolute;
display:block;
top:-100%;
left:0;
right:0;
}
.flow_your_icon span img{
display:block;
width:100%;
height:auto;
}
.flow_your_textbox{
position:relative;
display:block;
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
}
.flow_your_textbox h3{
display:block;
width:100%;
margin:0;
padding:20px 0;
font-size:24px;
line-height:30px;
font-weight:800;
text-align:center;
box-sizing:border-box;
border-bottom:1px dashed #999999;
}
.flow_your_textbox p{
margin:0;
padding:20px;
font-size:16px;
line-height:30px;
text-align:justify;
}
/* FLOW_OUR ----- */
#flow_our{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:0;
}
h2.flow_our_title{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:50px 0;
background:#ed2f06;
}
h2.flow_our_title:after{
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-20px;
border:20px solid transparent;
border-top:20px solid #ed2f06;
z-index:100;
}
h2.flow_our_title img{
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
}
.flow_our_wrapper{
position:relative;
display:block;
width:100%;
max-width:2000px;
height:600px;
margin:0 auto;
padding:0;
box-sizing:border-box;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
#planning{background-image:url(../img/planning_bg_pc.png);}
#writing{background-image:url(../img/writing_bg_pc.png);}
#design{background-image:url(../img/design_bg_pc.png);}
#coding{background-image:url(../img/coding_bg_pc.png);}
.flow_our_box{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
width:100%;
max-width:1250px;
height:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.flow_our_textbox{
position:relative;
display:block;
width:52%;
padding:0 4%;
box-sizing:border-box;
}
#planning .flow_our_textbox{margin:0 auto 0 0;}
#writing .flow_our_textbox{margin:0 0 0 auto;}
#design .flow_our_textbox{margin:0 auto 0 0;}
#coding .flow_our_textbox{margin:0 0 0 auto;}
.flow_our_icon{
display:block;
margin:0 auto;
padding:0;
width:60px;
height:auto;
}
.flow_our_headline h3{
display:block;
margin:10px 0;
padding:0;
font-size:30px;
line-height:40px;
font-weight:800;
text-align:center;
}
.flow_our_headline span{
position:relative;
display:block;
margin:0 auto;
padding:0;
font-family:"Figtree",sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:700;
font-size:16px;
line-height:20px;
text-align:center;
letter-spacing:1px;
color:#ffffff;
background:#111111;
box-sizing:border-box;
}
.flow_our_textbox p{
margin:10px 0 0 0;
padding:0;
font-size:18px;
line-height:40px;
font-weight:500;
text-align:justify;
color:#000000;
}
/* FLOW_COMPLETE ----- */
#flow_complete{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:0 0 60px 0;
}
h2.flow_complete_title{
position:relative;
display:block;
width:100%;
margin:0 auto;
padding:80px 0 60px 0;
}
h2.flow_complete_title img{
width:100%;
max-width:1250px;
margin:0 auto;
padding:0;
}
@media only screen and (max-width:1000px){
#flow{}
#flow .section_wrapper{}
/* FLOW_YOUR ----- */
#flow_your{}
h2.flow_your_title{padding:6vw 0 4vw 0;}
h2.flow_your_title img{}
.flow_your_wrapper{padding:0 0 4vw 0;}
.flow_your_box{margin:4vw 0 0 4%;}
.flow_your_icon{}
.flow_your_icon span{}
.flow_your_icon span img{}
.flow_your_textbox{}
.flow_your_textbox h3{font-size:20px;line-height:30px;}
.flow_your_textbox p{font-size:14px;line-height:24px;}
/* FLOW_OUR ----- */
#flow_our{}
h2.flow_our_title{padding:4vw 0;}
h2.flow_our_title:after{}
h2.flow_our_title img{}
.flow_our_wrapper{height:50vw;}
#planning{}
#writing{}
#design{}
#coding{}
.flow_our_box{}
.flow_our_textbox{}
#planning .flow_our_textbox{}
#writing .flow_our_textbox{}
#design .flow_our_textbox{}
#coding .flow_our_textbox{}
.flow_our_icon{width:40px;height:auto;}
.flow_our_headline h3{font-size:20px;line-height:30px;}
.flow_our_headline span{font-size:12px;}
.flow_our_textbox p{font-size:14px;line-height:24px;}
/* FLOW_COMPLETE ----- */
#flow_complete{padding:0 0 4vw 0;}
h2.flow_complete_title{padding:6vw 0 4vw 0;}
h2.flow_complete_title img{}
}
@media only screen and (max-width:750px){
#flow{}
#flow .section_wrapper{}
/* FLOW_YOUR ----- */
#flow_your{}
h2.flow_your_title{padding:8vw 0 0 0;}
h2.flow_your_title img{max-width:750px;}
.flow_your_wrapper{display:block;padding:0 0 8vw 0;}
.flow_your_box{width:92%;margin:16vw auto 0 auto;}
.flow_your_icon{width:40vw;padding-top:10vw;}
.flow_your_icon span{}
.flow_your_icon span img{}
.flow_your_textbox{}
.flow_your_textbox h3{}
.flow_your_textbox p{}
/* FLOW_OUR ----- */
#flow_our{}
h2.flow_our_title{padding:8vw 0;}
h2.flow_our_title:after{margin-left:-4vw;border:4vw solid transparent;border-top:4vw solid #ed2f06;}
h2.flow_our_title img{max-width:750px;}
.flow_our_wrapper{height:100vw;}
#planning{background-image:url(../img/planning_bg_sp.png);}
#writing{background-image:url(../img/writing_bg_sp.png);}
#design{background-image:url(../img/design_bg_sp.png);}
#coding{background-image:url(../img/coding_bg_sp.png);}
.flow_our_box{height:100%;}
.flow_our_textbox{width:100%;}
#planning .flow_our_textbox{margin:0 auto;}
#writing .flow_our_textbox{margin:0 auto;}
#design .flow_our_textbox{margin:0 auto;}
#coding .flow_our_textbox{margin:0 auto;}
.flow_our_icon{}
.flow_our_headline h3{}
.flow_our_headline span{}
.flow_our_textbox p{}
/* FLOW_COMPLETE ----- */
#flow_complete{padding:0 0 4vw 0;}
h2.flow_complete_title{padding:8vw 0 4vw 0;}
h2.flow_complete_title img{max-width:750px;}
}


/* --------------------------
 FAQ
-------------------------- */
#faq{background:#ffffff;}
#faq .section_wrapper{max-width:1000px;}
#faq input[type=checkbox]{display:none;}

/* FAQ_QUESTION ----- */
.faq_question{
position:relative;
display:block;
width:100%;
max-width:920px;
margin:0 auto;
padding:20px 40px 20px 70px;
font-size:16px;
line-height:30px;
text-align:justify;
color:#333333;
border-radius:10px;
cursor:pointer;
box-sizing:border-box;
background:#eeeeee;
}
.faq_question:hover{background:#f9f9f9;}
.faq_question:before{
content:"Q";
position:absolute;
display:block;
top:20px;
left:20px;
width:30px;
height:30px;
font-family:'Figtree', sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:700;
font-size:20px;
line-height:30px;
text-align:center;
color:#ffffff;
background:#111111;
border-radius:4px;
}
.faq_question:after{
content:"・・;
position:absolute;
display:block;
top:50%;
margin-top:-10px;
right:10px;
width:20px;
height:20px;
font-size:18px;
line-height:19px;
color:#111111;
}
#faq input[type=checkbox]:checked + .faq_question:after{content:"・・;}
#faq input[type=checkbox]:checked + .faq_question{background:#f9f9f9;border-radius:10px 10px 0 0;}
#faq input[type=checkbox]:checked + .faq_question:hover{background:#eeeeee;}
/* FAQ_ANSWER ----- */
.faq_answer{
position:relative;
margin:0 auto 30px auto;
padding:0 20px 0 70px;
width:100%;
max-width:920px;
height:0;
font-size:16px;
line-height:30px;
text-align:justify;
transition:1s;
box-sizing:border-box;
background:#f3efee;
border-radius:0 0 10px 10px;
overflow:hidden;
opacity:0;
}
.faq_answer:before{
content:"A";
position:absolute;
display:block;
top:20px;
left:20px;
width:30px;
height:30px;
font-family:'Figtree', sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:700;
font-size:20px;
line-height:30px;
text-align:center;
color:#ffffff;
background:#e81a31;
border-radius:4px;
}
.faq_answer p{margin:0;padding:0;}
.faq_answer:last-of-type{margin:0 auto;}
#faq input[type=checkbox]:checked + .faq_question + .faq_answer{
padding:20px 20px 20px 70px;
height:auto;
opacity:1;
}
@media only screen and (max-width:750px){
#faq{}
#faq .section_wrapper{}
#faq input[type=checkbox]{}
/* FAQ_QUESTION ----- */
.faq_question{padding:10px 26px 10px 40px;font-size:14px;line-height:20px;border-radius:6px;}
.faq_question:hover{}
.faq_question:before{top:10px;left:10px;width:20px;height:20px;font-size:18px;line-height:20px;border-radius:4px;}
.faq_question:after{margin-top:-8px;right:5px;width:16px;height:16px;font-size:16px;line-height:16px;}
#faq input[type=checkbox]:checked + .faq_question:after{}
#faq input[type=checkbox]:checked + .faq_question{border-radius:6px 6px 0 0;}
#faq input[type=checkbox]:checked + .faq_question:hover{}
/* FAQ_ANSWER ----- */
.faq_answer{margin:0 auto 4vw auto;padding:0 10px 0 40px;font-size:14px;line-height:20px;border-radius:0 0 6px 6px;}
.faq_answer:before{top:10px;left:10px;width:20px;height:20px;font-size:18px;line-height:20px;}
.faq_answer p{}
.faq_answer p br{display:none;}
.faq_answer:last-of-type{}
#faq input[type=checkbox]:checked + .faq_question + .faq_answer{padding:10px 10px 10px 40px;}
}


/* --------------------------
 CONTACT
-------------------------- */
#contact{
background:#ffffff;
}
.contact_wrapper{
position:relative;
display:block;
width:100%;
max-width:1000px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.contact_box{
position:relativve;
width:100%;
margin:0;
padding:0 4% 0 4%;
box-sizing:border-box;
}
.contact_iframe{
width:100%;
height:600px;
margin:0 auto;
border:none;
overflow:auto;
}


/* --------------------------
 LAW
-------------------------- */
/* SECTION --------------- */
#law .section{padding:60px 0 60px 0;}
#law .section#sct{padding:190px 0 120px 0;}
#law .section_wrapper{max-width:1000px;}
#law .section_box{}
/* HEADER ---------------- */
.header_law{
width:100%;
max-width:1000px;
margin:0 auto;
padding:0 0 60px 0;
box-sizing:border-box;
}
.header_law h1{
display:block;
width:100%;
margin:0;
padding:0 4%;
font-size:20px;
line-height:30px;
font-weight:700;
text-align:left;
color:#000000;
box-sizing:border-box;
}
.header_law h1 span{display:inline-block;margin:0 0 0 20px;font-family:'Figtree',Sans-Serif;font-size:16px;font-weight:300;color:#cccccc;}
/* DL -------------------- */
#law dl{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch;
width:100%;
margin:0 0 2px 0;
padding:0;
}
#law dl dt{
display:flex;
justify-content:flex-start;
align-items:center;
width:220px;
margin:0 2px 0 0;
padding:15px 5px;
font-size:14px;
line-height:30px;
text-align:left;
background:#f4f4f4;
box-sizing:border-box;
}
#law dl dd{
display:block;
flex:1;
margin:0;
padding:15px 5px;
font-size:14px;
line-height:30px;
text-align:justify;
background:#f9f9f9;
box-sizing:border-box;
}
/* SCT ------------------- */
#sct{}

@media only screen and (max-width:750px){
/* SECTION --------------- */
#law .section{padding:40px 0 40px 0;}
#law .section#sct{padding:90px 0 80px 0;}
#law .section_wrapper{}
#law .section_box{}
/* HEADER ---------------- */
.header_law{padding:0 0 40px 0;}
.header_law h1{font-size:16px;line-height:20px;}
.header_law h1 span{display:block;margin:0;font-size:12px;}
/* DL -------------------- */
#law dl{display:block;margin:0 0 40px 0;}
#law dl dt{display:block;width:100%;margin:0;padding:0;background:none;font-weight:700;}
#law dl dd{width:100%;padding:0;background:none;line-height:24px;}
/* SCT ------------------- */
#sct{}
}



/* --------------------------
 POLICY
-------------------------- */

/* SECTION --------------- */
#policy .section{padding:60px 0 60px 0;}
#policy .section#privacy{padding:190px 0 60px 0;}
#policy .section#link{padding:60px 0 120px 0;}
#policy .section_wrapper{max-width:1000px;}
#policy .section_box{}
@media only screen and (max-width:750px){
#policy .section{padding:40px 0 40px 0;}
#policy .section#privacy{padding:90px 0 40px 0;}
#policy .section#link{padding:40px 0 80px 0;}
#policy .section_wrapper{}
#policy .section_box{}
}

/* HEADER ---------------- */
.header_policy{
width:100%;
max-width:1000px;
margin:0 auto;
padding:0 0 60px 0;
box-sizing:border-box;
}
.header_policy h1{
display:block;
width:100%;
margin:0;
padding:0 4%;
font-size:20px;
line-height:30px;
font-weight:700;
text-align:left;
color:#000000;
box-sizing:border-box;
}
.header_policy h1 span{display:inline-block;margin:0 0 0 20px;font-family:'Figtree',Sans-Serif;font-size:16px;font-weight:300;color:#cccccc;}
@media only screen and (max-width:750px){
.header_policy{padding:0 0 40px 0;}
.header_policy h1{font-size:16px;line-height:20px;}
.header_policy h1 span{display:block;margin:0;font-size:12px;}
}

/* TEXT ------------------ */
#policy h2{
display:block;
margin:0 0 10px 0;
padding:0;
font-weight:700;
font-size:16px;
line-height:30px;
text-align:left;
}
#policy .text{
margin:0 0 60px 0;
padding:0;
font-size:14px;
line-height:30px;
text-align:justify;
}
#policy .text p{margin:0;padding:0;}
#policy .text ul{margin:0;padding:0;list-style:none;}
#policy .text ul li{position:relative;margin:0;padding:0;}
#policy .text ol{margin:0;padding:0;list-style:none;counter-reset:decimal;}
#policy .text ol li.li_decimal{position:relative;margin:0;padding:0 0 0 20px;}
#policy .text ol li.li_decimal:before{
content:counter(decimal);
counter-increment:decimal;
position:absolute;
top:8px;
left:0;
color:#ffffff;
background:#111111;
display:inline-block;
font-size:12px;
width:16px;
height:16px;
line-height:16px;
text-align:center;
}
#policy .text ol li ul{
margin:0;
padding:0;
list-style:none;
counter-reset:number;
}
#policy .text ol li ul li{
position:relative;
margin:0;
padding:0 0 0 14px;
}
#policy .text ol li ul li:before{
content:"";
position:absolute;
top:12px;
left:0;
background:#111111;
display:inline-block;
width:8px;
height:8px;
}
@media only screen and (max-width:750px){
#policy h2{margin:0 0 10px 0;font-size:14px;line-height:30px;}
#policy .text{margin:0 0 40px 0;font-size:13px;line-height:24px;}
#policy .text p{}
#policy .text ul{}
#policy .text ul li{}
#policy .text ol{}
#policy .text ol li.li_decimal{}
#policy .text ol li.li_decimal:before{top:4px;}
#policy .text ol li ul{}
#policy .text ol li ul li{padding:0 0 0 13px;}
#policy .text ol li ul li:before{top:8px;}
}



/* PRIVACY --------------- */
#privacy{}

/* DISCLAIMER ------------ */
#disclaimer{}

/* RIGHTS ---------------- */
#rights{}

/* LINK ---------------- */
#link{}









/* --------------------------
 WORKS
-------------------------- */
#works{}
#works .section_wrapper{max-width:2000px;}
ul.thumbnail_works{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
width:100%;
margin:0 auto 40px auto;
padding:0 0 0 2%;
box-sizing:border-box;
}
ul.thumbnail_works li{
display:block;
width:14%;
margin:0;
padding:0 0 40px 2%;
list-style:none;
}
@media only screen and (max-width:1279px){ul.thumbnail_works li{width:22%;}}
@media only screen and (max-width:1023px){ul.thumbnail_works li{width:30%;}}
@media only screen and (max-width:767px){ul.thumbnail_works li{width:46%;}}

ul.thumbnail_works li a{
display:block;
margin:0;
padding:0;
text-decoration:none;
background:#ffffff;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);
}
ul.thumbnail_works li a:hover{
text-decoration:none;
transform:translateY(-10px);
}
ul.thumbnail_works li a figure{
display:block;
margin:0;
padding:0;
background:#ffffff;
}
ul.thumbnail_works li a figure img{
display:block;
width:100%;
margin:0;
padding:0;
border:0;
}
ul.thumbnail_works li a:hover figure img{
opacity:0.5;
}
ul.thumbnail_works li a figure figcaption{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
margin:0;
padding:6px 0;
font-size:12px;
line-height:20px;
text-align:center;
font-weight:600;
color:#ffffff;
background:#000000;
}
ul.thumbnail_works li a figure figcaption:before{
content:"";
display:inline-block;
width:40px;
height:12px;
background-image: url("../works/thumbnail/dot-icon-responsive.png");
background-repeat:no-repeat;
background-position:center left;    
}
ul.thumbnail_works li a figure figcaption.dot-icon-pc:before{
content:"";
display:inline-block;
width:28px;
height:12px;
background-image: url("../works/thumbnail/dot-icon-pc.png");
background-repeat:no-repeat;
background-position:center left;    
}
ul.thumbnail_works li a figure figcaption.dot-icon-sp:before{
content:"";
display:inline-block;
width:18px;
height:12px;
background-image: url("../works/thumbnail/dot-icon-sp.png");
background-repeat:no-repeat;
background-position:center left;    
}
ul.thumbnail_works li a:hover figure figcaption{
background:#ff0000;
}