/*
Template:virtue
Theme Name:Virtue_child
Theme URI: https://kadencethemes.com/product/virtue-free-theme/
Description: The Virtue theme is extremely versatile with tons of options, easy to customize and loaded with great features. Virtue has Schema microdata integrated making it a step ahead for your sites SEO ranks. The clean modern design is built with html5 and css3 and uses the powerful responsive framework from Bootstrap to be a fully responsive and mobile friendly. It's fully ecommerce (Woocommerce) ready with all the tools you need to design an awesome online store. The versatile design is perfect for any kind of business, online store, portfolio or personal site. Virtue is Schema ready. We built Virtue with a powerful options panel where you can set things like your home layout, sliders, custom fonts, and completely customize your look without writing any CSS. You are going to love how easy this theme is to work with. Virtue was built and designed by <a href="http://kadencethemes.com/">Kadence Themes</a>.
Version: 3.4.9
Author: Kadence Themes
Author URI: https://kadencethemes.com/
Tags: responsive-layout, two-columns, one-column, custom-colors, custom-header, custom-menu, featured-images, translation-ready, theme-options, photoblogging, blog, e-commerce, portfolio
Text Domain: virtue

License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl.html
*/
html{
    font-size:62.5%;
    box-sizing: border-box;
}
body{
    font-size:inherit;
}

/* font style ----------------------------------------- */
h1,h2,h3,h4,h5{margin-top:0}
h1{
    font-size:2.4rem; /*游ゴシック体 Bold*/
    font-family: vdl-v7gothic, sans-serif;
    font-weight:bold;
    padding:1rem;
    line-height:1.61;
}
p.pre_h1 {
	font-size: 2rem;
	position: relative;
	display: inline-block;
	background-color: #333;
	color: #fff;
	padding: 5px 10px;
	line-height: 1;
	border-radius: 5px;
}
p.pre_h1::after {
	content: "";
	position: absolute;
	left: 10%;
	bottom: -9px;
	background: #333;
	height: calc(tan(60deg) * 10px / 2);
	width: 10px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media ( min-width: 992px ) {
	p.pre_h1 {
		margin-left: 40px;
	}
}
h2{
    font-size:2.0rem; /*UD デジタル教科書体　Std B*/
    font-family: bokutoh-rera, sans-serif;
    /*font-weight:bold;*/
    line-height:1.61;
}
h3{
    font-size:1.6rem;
    font-weight:bold;
    padding:1rem 0;
    line-height:1.61;
}
h4{
    font-size:1.3rem;
    line-height:1.61;
}
p,li,dd,dt,th,td{
    font-size:1.3rem; /*ヒラギノUD 角ゴstd w3*/
    line-height:1.61;
    font-weight:normal;
}
body.home h2{
    font-size:2.4rem; /*UD デジタル教科書体std B*/
    font-family: m-plus-rounded-2p, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align:center;
}

body.home h3{
    font-size:1.6rem; /*ヒラギノUD 角ゴstd w5*/
    font-weight:bold;
    text-align:center;
}
.text-big{
    font-size:1.4rem; /*ヒラギノUD 角ゴstd w4*/
    line-height:1.61;
}
.text-lead
{
    font-size:1.6rem !important; /*ヒラギノUD 角ゴstd w4*/
    line-height:1.61;
    text-align:center;
}
span.dod,
span.price{
    font-size:2.0rem !important;
    font-weight:bold;
    color:#ff0000;
}
@media (min-width:768px){
    h1{
        font-size:3.7rem;
    }
    h2{
        font-size:2.8rem;
    }
    h3{
        font-size:1.8rem;
    }
    h4{
        font-size:1.3rem;
    }
    body.home h2{
        font-size:3.7rem;
    }

    body.home h3{
        font-size:1.8rem;
    }
    .text-big{
        font-size:1.8rem !important;
        line-height:1.94;
    }
    .text-lead
    {
        font-size:2.1rem !important;
        line-height:1.90;
    }
    span.dod,
    span.price{
        font-size:2.5rem !important;
    }
}
.small{
    font-size:0.92em;
    line-height:0.92;
}
em{color:#ff0000}
p.text-lead span{
    text-align:left;
    margin:0 auto;
    display:inline-block;
}
.text-bold{font-weight: bold !important}
.text-left{text-align:left !important}
.text-nowrap{white-space: nowrap}
.wbr>span{display:inline-block;white-space:nowrap}

/* display style ----------------------------------------- */
.d-block{display:block !important}
.d-inline-block{display:inline-block !important}
.d-flex{display:flex !important}
.d-grid{display:grid !important}
.flex-wrap{flex-wrap:wrap}

.d-xs-block,
.d-sm-block,
.d-md-block,
.d-lg-block{display:none !important}
@media (max-width: 479px){
    .d-xs-block{display:block!important}
}
@media (min-width: 480px) and (max-width: 767px){
    .d-sm-block{display:block!important}
}
@media (min-width: 768px) and (max-width: 991px){
    .d-md-block{display:block!important}
}
@media (min-width: 992px){
    .d-lg-block{display:block!important}
}

.d-none{display:none}
.sp-none{display:none}
@media (min-width: 768px){
    .sp-none{display:block}
}
.d-lg-none,
.d-md-none,
.d-sm-none{display:block !important}
@media (max-width: 767px){
    .d-sm-none{display:none!important}
}
@media (max-width: 991px){
    .d-md-none{display:none!important}
}
@media (max-width: 1199px){
    .d-lg-none{display:none!important}
}

/* 削除予定
.d-sm-order .order-1{order:1}
.d-sm-order .order-2{order:2}
.d-sm-order .order-3{order:3}
@media (min-width: 768px){
    .d-sm-order :is(.order-1,.order-2,.order-3){order:0}
}*/

.w-100{width:100%}

/* padding margin ----------------------------------------- */
.p-0{padding:0!important}
.p-5{padding:0.5rem!important}
.p-10{padding:1.0rem!important}
.p-20{padding:2.0rem!important}
.p-25{padding:2.5rem!important}
.p-30{padding:3.0rem!important}
.p-35{padding:3.5rem!important}
.p-40{padding:4.0rem!important}
.px-10{padding-left:1.0rem!important;padding-right:1.0rem!important}
.px-17{padding-left:1.7rem!important;padding-right:1.7rem!important}
.px-20{padding-left:2.0rem!important;padding-right:2.0rem!important}
.px-25{padding-left:2.5rem!important;padding-right:2.5rem!important}
.px-30{padding-left:3.0rem!important;padding-right:3.0rem!important}
.py-10{padding-top:1.0rem!important;padding-bottom:1.0rem!important}
.py-20{padding-top:2.0rem!important;padding-bottom:2.0rem!important}
.py-25{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.py-30{padding-top:3.0rem!important;padding-bottom:3.0rem!important}
.py-80{padding-top:8.0rem!important;padding-bottom:8.0rem!important}

.mx-auto{margin:0 auto;}
.m-0{margin:0 !important}
.mt-0{margin-top:0!important}
.mt-40{margin-top:4rem!important}
.mb-0{margin-bottom:0!important}
.mr-0{margin-right:0!important}
.ml-0{margin-left:0!important}
.mb-5{margin-bottom:0.5rem!important}
.mb-10{margin-bottom:1.0rem!important}
.mb-20{margin-bottom:2.0rem!important}
.mb-25{margin-bottom:2.5rem!important}
.mb-30{margin-bottom:3.0rem!important}
.mb-35{margin-bottom:3.5rem!important}
.mb-40{margin-bottom:4rem!important}
.mb-60{margin-bottom:6rem!important}
.mb-70{margin-bottom:7rem!important}
@media (max-width: 768px){
	.pd-0{padding-left:15px!important;padding-right:15px!important}
}
@media (min-width: 768px){
    .pd-1{padding-left:32px!important;padding-right:32px!important}
    .pd-2{padding-left:20px!important;padding-right:20px!important}
    .pd-3{padding-left:23px!important;padding-right:23px!important}
    .pd-4{padding-left:60px!important;padding-right:60px!important}
}
@media (min-width: 992px){
    .pd-1{padding-left:63px!important;padding-right:63px!important}
    .pd-2{padding-left:40px!important;padding-right:40px!important}
    .pd-3{padding-left:45px!important;padding-right:45px!important}
    .pd-4{padding-left:120px!important;padding-right:120px!important}
    .pd-5{padding-left:112px!important;padding-right:112px!important}
}

/* 背景色 ----------------------------------------- */
.bg-gray{background-color:#e2e2e2}
.bg-gray2{background-color:#f0f0f4}
.bg-darkgray{background-color:#434343;color:#fff}
.bg-white{background-color:#fff}
.bg-assist{background-color:#9be323}
.bg-assist_thin{background-color:#c2f294}
.bg-full{background-color:#ff9173}
.bg-full_thin{background-color:#feac94}
.bg-retouch{background-color:#00c1ff}
.bg-retouch_thin{background-color:#81e7fe}
.bg-yellow{background-color:#ffeb5f}
.bg-basic{background-color:#90ee90;min-height:70px;line-height: 50px;}
.bg-sliver{background-color:#d5d5d5;min-height:70px;}
.bg-gold{background-color:#ffc04c;min-height:70px;}
.bg-pink{background-color:#fe9374}


/* breadcrumbs ----------------------------------------- */
 .breadcrumbs .breadcrumbs-list{border:2px solid #cfcfcf;margin-top:10px;font-size:1.3rem;line-height:1.6}
 .breadcrumbs .breadcrumbs-list span{margin:0 .5rem;line-height: 1;font-weight: bold;color:#333;}
 .breadcrumbs-list span a span{color:#555 !important;}

/* btn ----------------------------------------- */
.btn-orange{
    font-weight:bold;
    color:#000;
    background-color:#ffcb00;
    font-size:1.4rem !important;
    padding:1rem 3rem;
}
.btn-gray{
    color:#5d5d5d;
    border:2px solid #aaaaaa;
    font-size:1.6rem !important;
    padding:1rem 4rem !important;
    
}
.btn-gray:hover{
    color:inherit;
}
.btn-wrap{margin:20px 0 0 0 !important}
a.btn {
	position: relative;
	display:inline-block;
	text-decoration:none !important;
    font-size:1.4rem;
	margin: 0;
    border-radius:2px;
    white-space:normal;
    color:#000;
}
@media (min-width: 768px){
    .btn-orange{
        font-size:1.8rem !important;
        padding:1.5rem 6rem;
    }
    .btn-gray{
        font-size:2.1rem !important;
        padding:1rem 8rem !important;
    }
    a.btn {
        font-size:1.8rem;
    }
}
a.btn:hover{
    color:#000;
    opacity:0.7;
}
.btn.btn-arrow{
    padding-right:24px !important
}
.btn.btn-arrow:before{
    content:"";
    display:block;
    position:absolute;
    right:0;
    border-top: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid transparent;
}

/* badge ----------------------------------------- */
.badge{
    border: 1px solid #555555;
    border-radius: 4px;
    padding: .5rem;
    display:inline-block;
}
.badge-black{
    display:inline-block;
    background-color:#000000;
    color:#ffffff;
}

/* list ----------------------------------------- */
li.list-kome{
    list-style-type: none;
}
li.list-kome::before{
    content:"※";
    display:inline-block;
    position:relative;
}
ul.list-check li{background:url(../../uploads/2017/05/icon_check.png) no-repeat left;list-style: none;padding-left:2.5rem;background-size:20px;}

/* table ----------------------------------------- */
table th,
table td{text-align:center;border:1px solid #cccccc;}
.table-responsive{
    border:none;
}
div[class^="table-responsive"] {
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 1rem;
	-webkit-overflow-scrolling: auto
}

@media (min-width: 768px) {
	div[class^="table-responsive"] {
		margin-bottom: 0
	}
}
div[class^="table-responsive"]::-webkit-scrollbar {
	height: 10px
}
div[class^="table-responsive"]::-webkit-scrollbar-thumb {
	background: #6c757d;
	border-radius: 5px
}

/* layout ----------------------------------------- */
.mobileclass{
    /*background-color:rgba(255,255,255,0.15);*/
}
.contentclass{padding-bottom:0!important}


.container-fluid {
 width: 100%;
 max-width: 1050px;
 padding-left: 15px;
 padding-right: 15px;
 margin-left: auto;
 margin-right: auto;
}
@media (min-width: 1080px){
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
}
@media (min-width: 768px){
    /*:is(header, #content, #areaContact, footer, #pageheader, .box-tagcloud) .container,
    .breadcrumbs{
        width:800px !important;
        padding-left:0;
        padding-right:0;
    }*/
    header .container, #content .container, #areaContact .container, footer .container, #pageheader .container, .box-tagcloud .container{
        width:768px !important;
        padding-left:0;
        padding-right:0;
    }
}
@media (min-width: 992px){
    /*:is(header, #content, #areaContact, footer, #pageheader, .box-tagcloud) .container,
    .breadcrumbs{
        width:1050px !important;
    }*/
    header .container, #content .container, #areaContact .container, footer .container, #pageheader .container, .box-tagcloud .container{
        width:1050px !important;
    }
}
@media (max-width: 768px){
    .container{
        padding-right:15px;
        padding-left:15px;
    }
}

.columns{
    display:block;
}
.column{
    max-width:100%;
    margin-bottom:1rem;
}
.columns.compare > .column{
    padding:10px !important;
}
.columns .column.mw3,.columns .column.mw4,.columns .column.mw5{
    max-width:none;
}
.columns.bordered > .column{border:2px solid #dddddd;}
@media (min-width: 768px){
    .columns{
        display:flex;
        gap:2rem;
        flex-wrap: nowrap;
    }
    .column{
        flex:100%;
        margin-bottom:0px;
    }
    .columns.compare > .column{
        padding:20px !important;
    }
    .columns .column.mw2{max-width:20%}
    .columns .column.mw3{max-width:30%}
    .columns .column.mw4{max-width:40%}
    .columns .column.mw5{max-width:50%}
}
.columns-imp{
    display:flex;
    gap:2rem;
    flex-wrap:nowrap;
}

.columns-imp .column.mw2{max-width:20%}
.columns-imp .column.mw3{max-width:30%}
.columns-imp .column.mw4{max-width:40%}
.columns-imp .column.mw5{max-width:50%}
.column.height{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width:768px) and (-ms-high-contrast: active), (min-width:768px) and (-ms-high-contrast: none) {  /* IE11用 */
    .column.mw3,.column.mw4,.column.mw5{
        flex:auto;
    }
    #areaServiceIntro .columns .column:not(:last-child),
    .compare .column:not(:last-child){
        margin-right:20px;
    }
    #areaFaqSearch .column:first-child,
    #areaOffer .columns .column:first-child,
    #areaJump .columns .column:first-child,
    .price_uchiwake .columns .column:first-child{
        margin-right:20px;
    }
    #menu-main{
        padding: 1rem 0;
    }
    .kad-header-left.column{
        flex:auto;
        display:inline-block;
        float:left;
        margin-right:20px
    }
    #areaFaqSearch .column:last-child{
        flex:auto;
    }
    #areaOptionprice .columns .column.mw3{width:30%}
    #areaOptionprice .columns .column{flex:auto}
}

/* sidebarありのレイアウト */
.grid {
    max-width: 1300px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
	display: grid;
	display: -ms-grid;
	grid-template-rows: auto auto auto;
	/*grid-template-columns: 1fr;*/
	-ms-grid-rows: auto auto auto;
	/*-ms-grid-columns: 1fr;*/
	/*grid-template: "pageheader" auto "sidebar" auto "contents" auto / 1fr;*/
}
#pageheader {
	grid-row: 1 / 2;
	/*grid-column: 1 / 2;*/
	-ms-grid-row: 1;
	/*-ms-grid-column: 1;*/
	/*grid-area: pageheader;*/
}
#main {
	grid-row: 3 / 4;
	/*grid-column: 1 / 2;*/
	-ms-grid-row: 3;
	/*-ms-grid-column: 1;*/
	/*grid-area: contents;*/
}
#sidebar {
	grid-row: 2 / 3;
	/*grid-column: 1 / 2;*/
	-ms-grid-row: 2;
	/*-ms-grid-column: 1;*/
	/*grid-area: sidebar;*/
}
/* #w11780 */
#sidebar .widget-1 {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}
@media ( min-width: 992px) {
	.grid {
		grid-template-rows: auto 1fr;
		grid-template-columns: 300px 30px 1fr;
		-ms-grid-rows: auto 1fr;
		-ms-grid-columns: 300px 30px 1fr;
		/*grid-template: "sidebar pageheader" auto "sidebar contents" 1fr / 300px 1fr;*/
	}
	#pageheader {
		grid-row: 1 / 2;
		grid-column: 3 / 4;
		-ms-grid-row: 1;
		-ms-grid-column: 3;
	}
	#main {
		grid-row: 2 / 3;
		grid-column: 3 / 4;
		-ms-grid-row: 2;
		-ms-grid-column: 3;
	}
	#sidebar {
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-row-span: 2;
	}
}


/* ヘッダ 、フッタ ----------------------------------------- */
header,.headerclass,#containerfooter{
    background-color:#f9cf42;
}
#containerfooter{
    padding-top:0;
}
#nav-main{
    height:100%;
    display:flex;
}
#nav-main ul.sf-menu{margin:auto 0 auto auto;}
#nav-main ul.sf-menu ul,
#nav-second ul.sf-menu ul {width: auto}
#nav-main ul.sf-menu li a,
#nav-second ul.sf-menu li a{font-size: 1.3rem;font-weight:bold;color:#000;display: block;white-space: nowrap}
#nav-main ul#menu-main li a:hover{background-color:#fee81b;color:#000;}
#nav-main ul.sf-menu li a span{border-bottom:1px solid #000; padding-bottom:.3rem}
.sfHover ul.sf-dropdown-menu {border:5px solid #fee81b;}
ul.sf-dropdown-menu li a span{border-bottom:none !important}
#nav-main ul.sf-menu li a, #nav-second ul.sf-menu li a{padding:8px;}
#nav-main ul.sf-menu > li:last-child a{background-color:#333;width:41px;height:41px;}
#nav-main ul.sf-menu > li:last-child a span{display:flex;justify-content:center;align-items:center;border:none;}
#nav-main ul.sf-menu > li:last-child a:hover{background-color:#333}
#nav-main ul.sf-menu li a .icon-search{font-size:22px;color:white}
#containerfooter h3, #containerfooter, .footercredits p, .footerclass a, .footernav ul li a{
    color:#000000 !important;
    font-size:1.2rem;
}
#containerfooter h3,
#containerfooter .footernav ul{
    padding-left:0;
}
#thelogo{
    height:65px;
}
#thelogo h1{line-height: 1}
#thelogo img{
    height: 65px;
    margin-top: 4px;
    margin-bottom: 4px;
}
@media (min-width: 768px) {
    #thelogo img{
        margin-top:0;
        margin-bottom:0;
    }
}
/* 検索窓のスタイル：PCメニュー */
#search_popup input[type="text"]:focus{
    box-shadow: none;
}
#search_popup{
    position:absolute;
    right:0;
    top:4rem;
    border:1px solid #eee;
    background-color:white;
}
#search_popup div.wrap{
    display:flex;
    align-items:center;
    box-shadow:0 2px 8px 0 rgba(170,170,170,.3);
    padding:0.5rem;
}
#search_popup input[type="text"]{
    border:none;
    line-height:2;
    padding: 0.5rem;
    width:20rem;
}
#search_popup #search_popup_btn{
    border:none;
    cursor:pointer;
}
#search_popup .icon-search{
    color:#053f7e;
    font-size:2rem;
}
#search_popup_hide_btn{
    padding:0.5rem 1rem;
    font-size:2rem;
    color:#053f7e;
    font-weight:bold;
    border:none;
    cursor:pointer
}
/* 検索窓のスタイル：モバイルメニュー */
#search_list div.wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:white;
    gap:1rem;
 }
 #search_list input[type="text"]{
    border:none;
    padding:0 0.5rem;
    line-height:2.6;
    width:100%;
 }
 #search_list #search_popup_btn{
    border:none;
    cursor:pointer;
 }
 #search_popup_btn .icon-search{
    color:#053f7e;
 }
 
/* 共通 ----------------------------------------- */
h3.bg-darkgray{padding:9px 0 9px 17px;margin-bottom:10px}
h3.bg-darkgray + .text-big{margin-bottom:10px}
#areaFAQ h3.bg-darkgray{margin-bottom:10px;margin-top:30px}
@media (min-width:768px){
    h3.bg-darkgray{padding:9px 0 9px 17px;margin-bottom:28px}
    h3.bg-darkgray + .text-big{margin-bottom:30px}
    #areaFAQ h3.bg-darkgray{margin-bottom:10px;margin-top:80px}
}
/* faq footer 問い合わせ*/
.contents .numbers{color: #000;font-weight: bold;line-height: 1;margin-bottom:1rem;}
.contents .numbers a{color:#000}
.contents .numbers a:hover{text-decoration:underline;}
.contents .faq-balloon {box-sizing: border-box;position: relative;padding: 1em 1.5em;text-align: justify;line-height: 1.7;}
.contents .faq-balloon.faq-balloon_question {font-weight:700;margin:0;/*margin: 0 auto 1em 0;*/padding-left:60px;border-radius: 0 3px 3px;background: #ffffff url(../../uploads/2021/07/question4.png) no-repeat 0px center;background-size:45px;}
.contents .faq-balloon.faq-balloon_answer {border-radius: 3px 0 3px 3px;padding-left:60px;background:#fefec4 url(../../uploads/2021/07/answer4.png) no-repeat 0px 10px;background-size:45px;border:1px solid #fff;}
.contents .faq-balloon_answer div.plan,
.contents .faq-balloon_answer ol{margin-bottom:0;padding-left:3rem;}
.faq-balloon, .faq-balloon p, .faq-balloon ul li{font-size:1.7rem;line-height:1.6;margin-bottom:0!important;font-weight:bold!important}
#areaOffer .columns .column > .bordered{
    border:2px solid #bbbbbb;
    border-radius:10px;
}
/* スライダー関連 */
#portfolio-carousel .grid_item{
    margin-bottom:2rem;
}
.sliderclass{padding:0;margin-bottom:20px}
@media (min-width:768px){
    .sliderclass{padding:0;margin-bottom:47px}
}
#areaSample{margin-bottom:10px}
#areaSample h2{margin-bottom:10px}
#areaSample .btn{margin-top:5px}
@media (min-width:768px){
    #areaSample{margin-bottom:25px}
    #areaSample h2{margin-bottom:25px}
    #areaSample .btn{margin-top:20px}
}
#imageslider{
    max-width:1050px!important;
    padding:0!important;
}
#imageslider.container{
    width:100%!important
}
/* 制作プラン、料金例 */
#areaPrice{margin-bottom:30px;padding-top:27px;padding-bottom:30px}
#areaPrice .columns.compare{margin-bottom:20px;}
@media (min-width:768px){
    #areaPrice{padding-top:70px;padding-bottom:80px;margin-bottom:60px;}
    #areaPrice .columns.compare{margin-bottom:40px;}
}
#areaOffer {margin-bottom:30px}
#areaOffer h2 {margin-bottom:15px}
@media (min-width: 768px){
    #areaOffer h2 {margin-bottom:29px}
    #areaOffer {margin-bottom:60px}
    #areaOffer .columns {gap:2rem;margin-bottom:25px}
    #areaOffer .column .text-big{line-height:1.6}
}
#areaOffer .column .bordered{padding:19px 34px}
#areaOffer .column .bordered span.notes{font-size:1.4rem;padding:0.5rem 1rem;margin:0 1rem;vertical-align:middle}
.bg-assist_thin.btn-arrow:before{
    border-left: 12px solid #9be323;
}
.bg-full_thin.btn-arrow:before{
    border-left: 12px solid #ff9173;
}
.bg-retouch_thin.btn-arrow:before{
    border-left: 12px solid #00c1ff;
}

/* 検索ページ ----------------------------------------- */
/* 検索ページのスタイル */
#easy_search_link{
    list-style:none;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    row-gap: 0.5rem;
    column-gap:2rem;
    margin:3rem 0 0 0;
    padding:0;
}
#easy_search_link li{
    white-space:nowrap;
    margin:0;
    padding:0;
}
#easy_search_link li:before{
    content:">";
    display:inline-block;
    color:#f9cf42;
    margin-right:0.5rem;
    padding:0;
}
#cs_search_form .form-search .search-icon{
    left: inherit;
    right: 10px !important;
    border-left:1px solid #ccc;
}
#cs_search_form .search-query{
    border-radius:9999px;
    padding: 5px 40px 5px 15px;
}
#cs_search_form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cs_search_form h2{
    margin-bottom:1rem;
}
#search_result{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}
#search_result .thumbnail {
    height: auto;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#fccb00;
}
#search_result .item{
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    width:100%;
    height: 100%;
    margin: 0 auto;
}
#search_result .item.item_cnt_less {
	max-width: 340px;
}
#search_result .item .post-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    height: 100%;
}
#search_result .item .post-info .title{
    color: #000;
    font-weight:bold;
}
#search_result .item .post-info .excerpt,
#search_result .item .post-info .mod-date{
    margin-bottom: 0;
}
#search_result .item .post-info .mod-date{
    position:relative;
    padding-left:22px;
}
#search_result .item .post-info .mod-date:before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../../uploads/2023/09/cs_search_time.png") no-repeat;
    background-size: 100%;
}
@media (max-width: 479px){
    #easy_search_link{
        list-style:none;
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        row-gap: 0.5rem;
        column-gap:2rem;
        margin:3rem 0 0 0;
        padding:0;
    }
    #easy_search_link li{
        white-space:normal;
    }
}

/* TOPページ ----------------------------------------- */
#areaPRpoint .column
,#areaServiceCompare .columns > .column{
    border:2px solid #aaaaaa;
    background-color:#fff;
    padding:1rem;
}
#areaPRpoint img{
    border:1px solid #000;
}
/*#areaServiceCompare :is(div, p, li) {
    font-size:1.2rem;
}*/
#areaServiceCompare div,
#areaServiceCompare p,
#areaServiceCompare li{
    font-size:1.2rem;
}

#areaServiceCompare li{
    text-align:left;
}
#areaServiceCompare .column h4{
    background-color:#eaeaea;
    text-align:center;
    padding:0.5rem;
    line-height:1;
    font-weight:bold;
    margin-top:5px;
}
#areaServiceCompare .container .column .badge{
    line-height: 1;
}
#areaServiceCompare .columns-imp{
    align-items:center;
    height:100vw;
    max-height:80px;
}
@media all and (min-width:768px){
    #areaServiceCompare .inner_service{
        max-height: 160px;
        height: 100%;
    }
}
@media all and (min-width:992px){
    #areaServiceCompare .inner_service{
        max-height: 140px;
        height: 100%;
    }
}
#areaNews .column h3{
    text-align: left
}
#areaNews .feed-listitem time{
    display: table-cell;
    text-align: left;
    vertical-align: top;
    padding-right:1em;
}
#areaNews .feed-listitem{
    display: table;
    margin: 1em 0;
}
#areaNews .column .inner{
    list-style: none;
    height: 200px;
    /*height: 50vh;*/
    padding: 0 1rem;
    border: 1px solid #ccc;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
@media (min-width: 768px){
    #areaNews .column .inner{
        height: 50vh;
    }
}
#areaNews ul{
    list-style: none;
    padding-left:0px;
}
#areaFirstview {margin-bottom:13px}
@media (min-width:768px){
    #areaFirstview {margin-bottom:33px}
}
#areaFirstview h2{margin-bottom:10px}
@media (min-width:768px){
    #areaFirstview h2{margin-bottom:21px}
}
#areaPRpoint {margin-bottom:10px;padding-top:27px;padding-bottom:30px}
#areaPRpoint h2{margin-bottom:10px}
@media (min-width:768px){
    #areaPRpoint {margin-bottom:37px;padding-top:67px;padding-bottom:80px}
    #areaPRpoint h2{margin-bottom:28px}
}
#areaPRpoint p{font-size:1.6rem}
#areaServiceIntro h2{margin-bottom:10px}
#areaServiceIntro p.text-lead{margin-bottom:15px}
#areaServiceIntro{margin-bottom:20px}
@media (min-width:768px){
    #areaServiceIntro h2{margin-bottom:19px}
    #areaServiceIntro p.text-lead{margin-bottom:28px}
    #areaServiceIntro{margin-bottom:70px}
}
#areaServiceCompare{margin-bottom:10px;padding-top:27px;padding-bottom:30px}
#areaServiceCompare h2{margin-bottom:10px}
#areaServiceCompare p.text-lead{margin-bottom:15px}
@media (min-width:768px){
    #areaServiceCompare{padding-top:68px;padding-bottom:80px;margin-bottom:60px;}
    #areaServiceCompare h2{margin-bottom:19px}
    #areaServiceCompare p.text-lead{margin-bottom:28px}
}
span.ansin{
    padding-right:20px;
    padding-top:4px;
    background-image: url(../../uploads/2021/10/pencil.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}
@media (min-width: 768px) {
    span.ansin{
        padding-right:35px;
        padding-top:10px;
    }
}

#popup_photo-to-illust{
    position:fixed;
    top:200px;
    right:-300px;
    z-index:10;
    transition: 1s ease-in-out;
    opacity: 0;
}
@media (max-width: 479px){
	#popup_photo-to-illust{
		display:none;
	}
}
#popup_photo-to-illust .wrap{
	width:100%;
	max-width:240px;
	border:2px solid #251e1c;
	border-radius:10px;
	position:relative;
	background-color:#fff;
}
#popup_photo-to-illust .wrap a{
	display: block;
	padding: 1rem;
	background-color: #fff;
	border-radius: 10px;
}
#popup_photo-to-illust .close_btn{
	position: absolute;
	background-color:#f7c100;
	width:30px;
	height:30px;
	border-radius:50%;
	top:-15px;
	right:-15px;
	cursor:pointer;
    border: 2px solid #251e1c;
}
#popup_photo-to-illust .badge_new{
	position:absolute;
	top:-10px;
	left:10px;
	font-size:2.0rem;
	font-weight:bold;
	color:red;
	background-color:#fff;
	line-height:1;
}
#popup_photo-to-illust .close_btn:before{
	display:block;
	content:"";
	width:22px;
	height:4px;
	background-color:#fff;
	position:absolute;
	top:11px;
	left:2px;
	transform: rotate(45deg);
	border-radius:2px;
}
#popup_photo-to-illust .close_btn:after{
	display:block;
	content:"";
	width:22px;
	height:4px;
	background-color:#fff;
	position:absolute;
	top:11px;
	left:2px;
	transform: rotate(-45deg);
	border-radius:2px;
}

/* キャンセルについてのページ ----------------------------------------- */
#cancel table tbody th,
#cancel table tbody td{text-align:left}
#cancel {margin-bottom:30px}
#cancel .table-responsive{margin-bottom:10px}
@media (min-width:768px){
    #cancel {margin-bottom:80px}
    #cancel .table-responsive{margin-bottom:30px}
}

/* 資料をダウンロードページ、サイトマップページ ----------------------------------------- */
#csSitemap,
#areaSheetDl,
#areaFreeSample{margin-bottom:30px}
@media (min-width: 768px){
    #csSitemap,
    #areaSheetDl,
    #areaFreeSample{margin-bottom:70px}
}

/* お問い合わせ窓口ページ ----------------------------------------- */
#areaContact{
	margin-top: 50px;
    padding:2rem 0;
    color:#000000;
}
.contactBox .column:first-child  {
	margin-bottom: 20px;
}
.contactBox .column:last-child  {
	margin-bottom: 0;
}
.contactBox h2{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:bold;
    text-align: center;
    font-size: 2rem !important;
    line-height: 1.5;
    color:#000000;
	margin-bottom: 20px;
}
.contactBox .btn{
    background-color:#000000;
    color:#ffffff !important;
    padding:1rem;
    font-size:1.7rem;
    line-height:1.5;
    font-weight:bold;
}
.contactBox-wrapper {
	padding: 20px 0;
}
.contactBox.columns .bg-img{
    background-image:url();
}
.contactBox.columns .bg-img p{
    margin-bottom: 0;
}
.contactBox.columns .bg-img .design_email_tel{
    position:relative;
}
.contactBox.columns .bg-img .design_email_tel a{
    color:#000000 !important;
}
.contactBox.columns .bg-img .design_email_tel p{
    font-size: 2.2rem;
    line-height: 1.7;
}
.contactBox.columns .bg-img .design_email_tel .hours {
    font-size: 1.6rem;
}
@media (min-width: 768px){
	.contactBox .column:first-child  {
		margin-bottom: 0;
	}
    .contactBox h2{
        font-size: 2.4rem !important;
		text-align: left !important;
    }
    .contactBox .btn{
        padding:2rem;
        font-size:1.8rem;
    }
    .contactBox.columns .bg-img{
        position:relative;
        background-image:url("../../uploads/2025/05/footer_fukidashi2.png");
        background-image: image-set(url("../../uploads/2025/05/footer_fukidashi2.png") 1x, url("../../uploads/2025/05/footer_fukidashi2_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2025/05/footer_fukidashi2.png") 1x, url("../../uploads/2025/05/footer_fukidashi2_2x.png") 2x);
        background-repeat:no-repeat;
        background-size:contain;
        background-position:top right;
	}
	.contactBox.columns .bg-img .design_email_tel p{
		font-size: 2.4rem;
	}
	.contactBox.columns .bg-img .design_email_tel .hours {
		font-size: 1.6rem;
	}
    .contactBox.columns .bg-img .design_email_tel{
        position:absolute;
        bottom:0;
        padding-left:1rem;
		background-color: rgba(255, 235, 95, 0.9);
    }
}
@media (min-width:768px) and (-ms-high-contrast: active), (min-width:768px) and (-ms-high-contrast: none) {  /* IE11用 */
    .contactBox.columns .column.bg-img{
        margin-left:20px;
    }
}
.contents #areaEstimate #areaFaq{padding:1em 0;}
.contents #areaEstimate #areaFaq .faq-balloon_answer {background-color:#fff;}
#areaEstimate .columns.bordered .column{
    padding:10px;
}
@media (min-width: 768px) {
    #areaEstimate .columns.bordered{
        margin-bottom:25px;
    }
    #areaEstimate .columns.bordered .column{
        padding:20px;
    }
    #areaEstimate .column.flex{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #areaEstimate .column.flex .grow-2{
        flex-grow:2;
    }
}
#areaContact2{margin-bottom:30px}
@media (min-width: 768px){
    #areaContact2{margin-bottom:70px}
}

/* 制作プランのページ ----------------------------------------- */
#planSyusei h1, #planAssist h1, #planFull h1{padding: 0.5rem;margin-bottom: 12px}
@media (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE11用 */
    #planSyusei h1, #planAssist h1, #planFull h1{padding: 2rem 0 0 0}
}
@media (min-width: 992px){
    #planSyusei h1, #planAssist h1, #planFull h1{position:relative;left:40px}
}
div.nagare{overflow:auto}
#areaJump .columns .column{
    border:2px solid #aaaaaa;
    border-radius:8px;
}
#areaJump{padding-top:30px;padding-bottom:30px}
#areaJump h2{margin-bottom:20px}
#areaJump .column p{padding:8px 16px;margin-bottom:0px}
@media (min-width: 768px){
    #areaJump{padding-top:70px;padding-bottom:80px}
    #areaJump h2{margin-bottom:57px}
    #areaJump .column p{padding:16px;line-height:1.6}
}
.underline-assist,
.underline-full,
.underline-retouch {
  text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-decoration-color: #99e22d;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}
.underline-full {
  text-decoration-color: #ff9173;
}
.underline-retouch {
  text-decoration-color: #00c1ff;
}



.jump-list_full, .jump-list_retouch, .jump-list_assist{position:relative;min-height:200px;}
.jump-list_full .fukidasi, .jump-list_assist .fukidasi, .jump-list_retouch .fukidasi{position:relative;padding-top:2rem}
.jump-list_full h3, .jump-list_assist h3, .jump-list_retouch h3{border-top-left-radius: 6px; border-top-right-radius: 6px;padding:1.5rem 2.5rem;width:100%}
@media (min-width: 768px){
    .jump-list_retouch .text-big.margin{margin-bottom:50px}
    .jump-list_full .text-big.margin{margin-bottom:45px}
    
    .jump-list_full, .jump-list_retouch, .jump-list_assist{
        display: flex;
        align-items: stretch;
        align-content: space-between;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        height:100%;
    }
}
@media (min-width: 992px){
    .jump-list_full .fukidasi, .jump-list_assist .fukidasi, .jump-list_retouch .fukidasi{position:absolute;top:-30px;right:10px;padding-top:0}
    .jump-list_assist .text-big{padding-right:12rem!important}
    .jump-list_retouch .text-big.margin{margin-bottom:44px}
    .jump-list_full .text-big.margin{margin-bottom:37px}
}
#areaLead{margin-bottom:20px}
@media (min-width:768px){
    #areaLead{margin-bottom:40px}
}
#areaLead .column .badge{margin:4px;height:fit-content;max-width:220px;text-align:center}
#areaToha {margin-bottom:16px}
@media (min-width: 992px){
    #areaToha .bg-img-assit{
        background-image:url("../../uploads/2025/05/illust_toha.png");
        background-image: image-set(url("../../uploads/2025/05/illust_toha.png") 1x, url("../../uploads/2025/05/illust_toha_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2025/05/illust_toha.png") 1x, url("../../uploads/2025/05/illust_toha_2x.png") 2x);
        background-size: 400px;
        background-position:bottom right;
        background-repeat:no-repeat;
    }
    #areaToha .bg-img-full{
        background-image:url("../../uploads/2021/10/illust_cocksan.png");
        background-image: image-set(url("../../uploads/2021/10/illust_cocksan.png") 1x, url("../../uploads/2021/10/illust_cocksan_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2021/10/illust_cocksan.png") 1x, url("../../uploads/2021/10/illust_cocksan_2x.png") 2x);
        background-size: 226px;
        background-position:top right;
        background-repeat:no-repeat;
    }
    #areaToha .bg-img-retouch{
        background-image:url("../../uploads/2021/10/illust_jyosei.png");
        background-image: image-set(url("../../uploads/2021/10/illust_jyosei.png") 1x, url("../../uploads/2021/10/5cdab7bf7ff39d5f576376c2cce20f98.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2021/10/illust_jyosei.png") 1x, url("../../uploads/2021/10/5cdab7bf7ff39d5f576376c2cce20f98.png") 2x);
        background-size: 215px;
        background-position:top right;
        background-repeat:no-repeat;
    }
}
#planSyusei .pricePdct {margin-bottom:40px}
#planSyusei .pricePdct thead th{background-color:#434343;color:#fff}
@media (min-width: 768px){
    #planFull #areaLead > .columns.main{height:336px;gap:0}
    #planAssist #areaLead > .columns.main,
    #planSyusei #areaLead > .columns.main{
        height:330px;
        gap:0;
    }
    #planFull #areaLead > .columns.main .column:first-child{
        background-image:url("../../uploads/2021/10/top_full_illust3.png");
        background-image: image-set(url("../../uploads/2021/10/top_full_illust3.png") 1x, url("../../uploads/2021/10/top_full_illust3_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2021/10/top_full_illust3.png") 1x, url("../../uploads/2021/10/top_full_illust3_2x.png") 2x);
        background-size: auto;
        background-position: left 64px;
        background-repeat: no-repeat;
    }
    #planAssist #areaLead > .columns.main .column:first-child{
        background-image:url("../../uploads/2021/10/top_design_illust3.png");
        background-image: image-set(url("../../uploads/2021/10/top_design_illust3.png") 1x, url("../../uploads/2021/10/top_design_illust3_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2021/10/top_design_illust3.png") 1x, url("../../uploads/2021/10/top_design_illust3_2x.png") 2x);
        background-size: auto;
        background-position: left 64px;
        background-repeat: no-repeat;
    }
    #planSyusei #areaLead > .columns.main .column:first-child{
        background-image:url("../../uploads/2021/10/top_syusei_illust3.png");
        background-image: image-set(url("../../uploads/2021/10/top_syusei_illust3.png") 1x, url("../../uploads/2021/10/top_syusei_illust3_2x.png") 2x);
        background-image: -webkit-image-set(url("../../uploads/2021/10/top_syusei_illust3.png") 1x, url("../../uploads/2021/10/top_syusei_illust3_2x.png") 2x);
        background-size: auto;
        background-position: left 64px;
        background-repeat: no-repeat;
    }
    #planFull #areaLead > .columns.main .column:last-child,
    #planAssist #areaLead > .columns.main .column:last-child,
    #planSyusei #areaLead > .columns.main .column:last-child{
        max-width:35%;
        position:relative;
    }
    #planSyusei #areaLead > .columns.main .column:last-child img{
        position:absolute;
        left:-4px;
    }

    #planFull #areaLead > .columns.main .column .main_text{
        max-width: 410px;
        width: 100%;
        margin-left: 220px;
    }
    #planAssist #areaLead > .columns.main .column .main_text,
    #planSyusei #areaLead > .columns.main .column .main_text{
        max-width: 476px;
        width: 100%;
        margin-left: 200px;
    }
}
#areaFlow {margin-bottom:30px}
#areaFlow h2{margin-bottom:10px}
#areaFlow .nagare{margin-bottom:12px}
@media (min-width: 768px){
    #areaFlow {margin-bottom:70px}
}
/* デザインアシスト */
#areaOffer1{margin-bottom:20px}
#areaOffer1 h2{margin-bottom:10px}
#areaOffer1 h2 + .text-big{margin-bottom:15px}
@media (min-width: 768px){
    #areaOffer1{margin-bottom:43px}
    #areaOffer1 h2{margin-bottom:23px}
    #areaOffer1 h2 + .text-big{margin-bottom:29px}
}
#areaCourse{margin-bottom:30px;padding-top:27px;padding-bottom:30px}
#areaCourse h2{margin-bottom:10px}
#areaCourse h2 + div .text-big{margin-bottom:15px}
@media (min-width: 768px){
    #areaCourse{padding-top:70px;padding-bottom:80px;margin-bottom:60px}
    #areaCourse h2{margin-bottom:22px}
    #areaCourse h2 + div .text-big{margin-bottom:29px}
}
/* イラスト作成： 見出しスタイル */
h2.title_illust {
	padding:0 1rem;
	background-color: #f7c100;
	text-align:center;
	border-radius:8px;
}
h2.title_illust.catch{
	padding:0 1rem;
	background-color: initial;
	text-align:center;
	line-height:1;
}
h2.title_illust.catch > span{
	background-image: url("../../uploads/2023/08/underline_deco_long.svg");
	background-repeat: no-repeat;
    background-size: contain;
	background-position-y: 2rem;
    position: relative;
	line-height: 2;
    padding: 1rem;
}
@media (max-width: 479px){
	h2.title_illust.catch > span{
		line-height: 1.6;
	}
}
#planPhotoToIllustration .catch-wrap{
	display: flex;
	position: relative;
}
#planPhotoToIllustration .catch-wrap:after{
    display: block;
    content: "";
    width: 2.6rem;
    height: 2.6rem;
    position: relative;
    top: 0;
    background-image: url("../../uploads/2023/08/icon-mi.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
#planPhotoToIllustration span.icon-price{
	width:3rem;
	height:auto;
	background-image: url("../../uploads/2023/08/icon_enmark.svg");
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center;
	margin-right: 1rem;
}
#planPhotoToIllustration span.catch-price{
	background-image: url("../../uploads/2023/08/underline_kakaku.svg");
	background-repeat: no-repeat;
    background-size: contain;
	background-position: bottom;
    position: relative;
}
#planPhotoToIllustration span.catch-nouhin{
	background-image: url("../../uploads/2023/08/underline_deco.svg");
	background-repeat: no-repeat;
    background-size: contain;
	background-position: bottom;
    position: relative;
}
#planPhotoToIllustration span.catch-square{
	background-image: url("../../uploads/2023/08/underline_sonota.svg");
	background-repeat: no-repeat;
    background-size: contain;
	background-position: bottom;
    position: relative;
}
#planPhotoToIllustration span.icon-folder{
	width:3rem;
	height:auto;
	background-image: url("../../uploads/2023/08/icon_folder.svg");
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center;
	margin-right:1rem;
}
#planPhotoToIllustration span.icon-square{
	width:2.5rem;
	height:2.5rem;
	display:flex;
	justify-content: center;
	align-items: center;
    margin: auto 1rem auto 0;
}
#planPhotoToIllustration span.icon-square:before{
	content:"";
	width:100%;
	height:100%;
	background-color:#f3c136;
	display:block;
}
/* イラスト作成： メインビジュアル */
#planPhotoToIllustration #areaLead .grid-area{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	justify-content: center;
	align-items: center;
	background-image: url("../../uploads/2023/08/service_background.png");
	background-size: cover;
    background-position: top center;
	padding-top:1rem;
	padding-bottom:5rem;
	gap:1rem;
}
/* イラスト作成： 「写真からイラスト作成」って？ */
#planPhotoToIllustration #areaInfo .hukidasi-wave .grid-area{
	display: grid;
	grid-template-columns: minmax(315px, 1fr) 1fr;
	grid-template-rows: 1fr;
}
@media (max-width: 670px){
    #planPhotoToIllustration #areaInfo .hukidasi-wave .grid-area{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}
#planPhotoToIllustration #areaInfo .hukidasi-customer h4
{
	color: #f7c100;
}
#planPhotoToIllustration #areaInfo .hukidasi-wave h4{
	color: #69b4ff;
}
#planPhotoToIllustration #areaInfo .hukidasi-wave p{
	line-height:1.6;
}
#planPhotoToIllustration #areaInfo .hukidasi-customer ul{
	list-style:none;
}
#planPhotoToIllustration #areaInfo .hukidasi-customer ul li {
	position: relative;
	line-height:1.4;
	padding-left:1.5rem;
}
#planPhotoToIllustration #areaInfo .hukidasi-customer ul li:before {
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	display: inline-block;
	content: "";
	background: #f7c100;
	margin-right:1rem;
}
#planPhotoToIllustration #areaInfo .hukidasi-customer .bg-color{
	padding:2rem;
	background-color: #fffcd4;
	border-radius: 1rem;
	position: relative;
}
#planPhotoToIllustration #areaInfo .hukidasi-wave .bg-color{
	padding:2rem 2rem 0 2rem;
	background-color: #def2ff;
	border-radius: 1rem;
	position: relative;
}
#planPhotoToIllustration #areaInfo .sp-block{
	display: block;
}
@media (min-width: 480px){
	#planPhotoToIllustration #areaInfo .sp-block{
		display: none;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-customer{
		position: relative;
		display: flex;
		flex-direction: row;
		padding-left: 90px;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-wave{
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		padding-right: 90px;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-customer .bg-color{
		width:100%;
		max-width:640px;
		padding:2rem 2rem 2rem 4rem;
		position: relative;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-wave .bg-color{
		width:100%;
		max-width:630px;
		padding:2rem 2rem 0 2rem;
		position: relative;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-customer:after{
		content: '';
		display: block;
		width: 120px;
		height: 120px;
		position: absolute;
		top: -2rem;
		left: 0;
		background: url(../../uploads/2023/08/fukidasi_customer.png) no-repeat;
		background-size: 100%;
	}
	#planPhotoToIllustration #areaInfo .hukidasi-wave:after{
		content: '';
		display: block;
		width: 120px;
		height: 120px;
		position: absolute;
		top: -2rem;
		right: 0;
		background: url(../../uploads/2023/08/fukidasi_wave.png) no-repeat;
		background-size: 100%;
	}
}
#planPhotoToIllustration #areaInfo .feature-wrap{
	width: 100%;
	max-width: 715px;
	margin:0 auto;
}
#planPhotoToIllustration #areaInfo .feature-wrap .grid-area{
	width: 100%;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:0;
	justify-content: center;
	align-items: center;
	background-color: #fffcd4;
	border-radius: 1rem;
	padding: 3rem 2rem;
}
#planPhotoToIllustration #areaInfo .feature-wrap .grid-area p{
	white-space: nowrap;
	text-align: center;
    margin: 0 auto;
    display: inline-block;
    line-height: 1.3;
    font-weight: bold;
}
#planPhotoToIllustration #areaInfo .feature-wrap .grid-area p span.point{
	font-size:1.2em;
}
#planPhotoToIllustration #areaInfo .feature-wrap .grid-area p img{
	width:100%;
	max-width:100px;
}
@media (max-width: 479px){
	#planPhotoToIllustration #areaInfo .feature-wrap .grid-area{
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		background-color: #fffcd4;
		border-radius: 1rem;
		padding: 3rem 2rem;
		gap:2rem;
	}
	#planPhotoToIllustration #areaInfo .feature-wrap .grid-area p img{
		width:100%;
		max-width:60px;
	}
}
/* イラスト作成： プランの詳細 */
#planPhotoToIllustration #areaDetail ul{
	list-style:none;
}
#planPhotoToIllustration #areaDetail ul li{
	position: relative;
	line-height:1.4;
	padding-left:1.5rem;
}
#planPhotoToIllustration #areaDetail ul li:before{
	border-radius: 50%;
	width: 1em;
	height: 1em;
	display: inline-block;
	content: "";
	background: #f7c100;
    margin-right: 0.4rem;
}
#planPhotoToIllustration #areaDetail .attention_box{
	border:1px dashed #ccc;
	padding: 1rem;
	background-color: #f7f7f7;
}

#planPhotoToIllustration #areaDetail .attention_box ul li{
    padding-left: initial !important;
}
#planPhotoToIllustration #areaDetail .attention_box ul li:before{
	content: "※";
    border: none;
    width:auto;
    height:auto;
    background-color:transparent;
    position: absolute;
    left:-2rem;
}
/* イラスト作成： ご利用の流れ */
#planPhotoToIllustration #areaFlow .flowSteps.sp-block{
	display:none;
}
#planPhotoToIllustration #areaFlow .flowSteps.pc-block{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 40px;
	row-gap: 1rem;
}
#planPhotoToIllustration #areaFlow .flowSteps .flow-explain{
	display:flex;
	justify-content: end;
}
#planPhotoToIllustration #areaFlow .flowSteps.pc-block .flow-explain{
	grid-column: 3/6;
    grid-row: 3/4;
}
#planPhotoToIllustration #areaFlow .flowSteps.pc-block img{
	width:100%;
	max-width:176px;
}
#planPhotoToIllustration #areaFlow .flow_summary p{
	font-size:1.6rem;
}
#planPhotoToIllustration #areaFlow .flow_summary ul.imp{
	list-style:none;
}
#planPhotoToIllustration #areaFlow .flow_summary ul.imp li:before {
	content: "●";
	position: relative;
	left:-1rem;
}
#planPhotoToIllustration #areaFlow .flow_summary .columns .column.mw4{
	border:1px dashed #ccc;
	padding: 1rem;
	background-color: #f7f7f7;
}
@media (max-width: 479px){
	#planPhotoToIllustration #areaFlow .flowSteps.sp-block{
		display:block;
	}
	#planPhotoToIllustration #areaFlow .flowSteps.pc-block{
		display:none;
	}
}
/* イラスト作成： 作成例・活用例 */
#planPhotoToIllustration #areaDesignSample .grid-area{
	display: grid;
	grid-template-columns: 1fr 2px 1fr;
	grid-template-rows: 1fr 2px 1fr;
	background-color: #f7c100;
}
#planPhotoToIllustration #areaDesignSample .grid-area p{
	margin:0;
	padding:0;
}
#planPhotoToIllustration #areaDesignSample .grid-area .sample1,
#planPhotoToIllustration #areaDesignSample .grid-area .sample2,
#planPhotoToIllustration #areaDesignSample .grid-area .useage1,
#planPhotoToIllustration #areaDesignSample .grid-area .useage2{
	padding:2rem;
	background-color:#fff;
}
#planPhotoToIllustration #areaDesignSample .grid-area .sample1{
	grid-column: 1/2;
	grid-row: 1/2;
}
#planPhotoToIllustration #areaDesignSample .grid-area .sample2{
	grid-column: 3/4;
	grid-row: 1/2;
}
#planPhotoToIllustration #areaDesignSample .grid-area .useage1{
	grid-column: 1/2;
	grid-row: 3/4;
}
#planPhotoToIllustration #areaDesignSample .grid-area .useage2{
	grid-column: 3/4;
	grid-row: 3/4;
}
#planPhotoToIllustration #areaDesignSample .grid-area .line-v{
	grid-column: 2/3;
	grid-row: 1/4;
	overflow: hidden;
	border:2px dashed #fff;
}
#planPhotoToIllustration #areaDesignSample .grid-area .line-h{
	grid-column: 1/4;
	grid-row: 2/3;
	overflow: hidden;
	border:2px dashed #fff;
	background-color: #f7c100;
	display:flex;
	justify-content:center;
	align-items: center;
}
#planPhotoToIllustration #areaDesignSample .grid-area .line-h:before{
	content: "";
    height: 6rem;
    display: block;
    border: 3px solid #fff;
    position: absolute;
}
@media (max-width: 479px){
	#planPhotoToIllustration #areaDesignSample .grid-area{
		display: block;
		background-color:#fff;
	}
	#planPhotoToIllustration #areaDesignSample .grid-area p:not(:last-child){
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom:2px dashed #f7c100;
	}
	#planPhotoToIllustration #areaDesignSample .grid-area .line-v,
	#planPhotoToIllustration #areaDesignSample .grid-area .line-h{
		display:none;
	}
}
/* イラスト作成： キャラクターサンプル */
#planPhotoToIllustration #areaCharacterSample .samples{
	width: 100%;
	max-width: 740px;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap:2rem;
	padding-top:2rem;
	padding-bottom:2rem;
	margin:0 auto;
}
#planPhotoToIllustration #areaCharacterSample .samples .item {
	width: 100%;
	background-color: #e6e6e6;
}
/* イラスト作成： 改行 */
.br-sp{
	display:none;
}
@media (max-width: 479px){
	.br-sp{
		display:block;
	}
}
#planPhotoToIllustration .br-wide-block{
	display:none;
}
@media (min-width: 670px){
	#planPhotoToIllustration .br-wide-block{
		display:block;
	}
}
#planPhotoToIllustration .wbr span{
	white-space:no-wrap;
}

/* 料金例のページ ----------------------------------------- */
ul.anchor{
    display:block;
    padding:0;
    list-style: none;
    margin-bottom:20px;
}
ul.anchor li{
    text-align: center;
    flex:100%;
    border: 2px solid #cccccc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
ul.anchor li.ac{
    background-color:#aaaaaa;
    border-color:#aaaaaa;
}
ul.anchor li a{
    color:#000;
    display:block;
    padding:7px 0;
    font-weight:bold;
    font-size:1.4rem;
}
@media (min-width: 768px){
    ul.anchor{
        display:flex;
        margin-bottom:28px;
    }
    ul.anchor li a{
        padding:14px 0;
    }
}
#areaOptionprice .wrapper .column .priceOption{margin-bottom:0px;background-color:#fff;}
#areaOptionprice .wrapper .columns {margin-bottom:0px;padding:1rem}
#areaOptionprice .wrapper .columns:not(:last-child){border-bottom:1px solid #dddddd}
#areaOptionprice .wrapper{border-top:1px solid #dddddd;border-bottom:1px solid #dddddd}
#areaOptionprice .wrapper .columns:nth-child(2n){background-color:#eee;}
#areaOptionprice .wrapper .column{margin-bottom:0px;}
.price_top{}
@media (min-width: 768px){
    .price_top{margin-top: -8px;margin-bottom: 35px!important}
}
#csPrice table th{font-weight:bold}
#csPrice table th,
#csPrice table td{
    font-size:1.5rem;
}
#csPrice .price_uchiwake {margin-bottom: 10px}
#csPrice .price_uchiwake h2{margin-bottom: 10px}
#csPrice .attention.uchiwake ul{padding: 10px;margin-bottom: 30px;}
#csPrice .attention.uchiwake ul li{margin-bottom:0}
#csPrice .price_uchiwake .columns .column{padding:10px}
#areaOptionprice{margin-bottom:30px}
@media (min-width: 768px){
    #csPrice .price_uchiwake {margin-bottom: 26px}
    #csPrice .price_uchiwake h2{margin-bottom: 26px}
    #csPrice .attention.uchiwake ul{padding: 10px 0 10px 20px;margin-bottom: 84px;}
    #csPrice .attention.uchiwake ul li{margin-bottom:0}
    #csPrice .price_uchiwake .columns .column{padding:10px}
    #areaOptionprice{margin-bottom:70px}
}
#csPrice .text-big{padding-left:10px;padding-right:10px}
#csPrice table th,
#csPrice table td:nth-child(1){min-width:120px}
@media (min-width: 768px){
    #csPrice .text-big{padding-left:16px;padding-right:16px}
    #csPrice table tr:first-child th,
    #csPrice table td:nth-child(1){padding-left:27px;padding-right:16px}
}
#csPrice .attention ul, #cancel .attention ul{padding:10px;margin-bottom:10px}
#csPrice .attention ul li, #cancel .attention ul li{margin-bottom:0}
#csPrice table.pricePdct{margin-bottom:10px}
@media (min-width: 768px){
    #csPrice .attention ul, #cancel .attention ul{padding:10px 0 10px 20px;margin-bottom:25px}
    #csPrice table.pricePdct{margin-bottom:30px}
}
#csPrice .priceOption.top {min-width:540px;overflow:scroll}
#csPrice .priceOption.top td:not(:nth-child(2)){border-left:none;border-right:none}
#csPrice .priceOption.top td .columns{gap:0.5rem;text-align:center}
#csPrice .priceOption.top td .columns .column{margin-bottom:0}
#csPrice .priceOption.top td, #csPrice .priceOption.top th{text-align:left}
#csPrice .priceOption.top .menu{width:26%}
#csPrice .priceOption.top .detail{width:47%}
#csPrice .priceOption.top p, #csPrice .priceOption.top h5{margin:0}
#csPrice #areaPrice{margin-bottom:30px}
#csPrice #priceOthers,
#csPrice #priceDm,
#csPrice #pricePoster,
#csPrice #priceTray,
#csPrice #priceReaflet{margin-bottom:30px}
@media (min-width:768px){
    #csPrice #areaPrice{margin-bottom:80px}
    #csPrice #priceOthers,
    #csPrice #priceDm,
    #csPrice #pricePoster,
    #csPrice #priceTray,
    #csPrice #priceReaflet{margin-bottom:82px}
}

/* 制作例、タクソノミーアーカイブ ----------------------------------------- */
.portfolio_description {margin-bottom: 3rem;}
.portfolio_description p{font-size:1.6rem;line-height:1.6;}
.portfolio_item a {z-index:auto;}
/* 下層コンテンツの選択ボタン */
.term-btn-list {
	margin-bottom: 10px;
}
.term-btn-list.term-selected {
	background-color: #f1f1f1;
	padding: 10px;
}
.term-btn-list.term-selected .title-filter {
    font-size: 1.3rem;
    padding-right: 10px;
}
.term-btn-list.term-selected .title-filter,
.term-btn-list.term-selected ul {
	display: inline;
}
.term-btn-list > ul {
	padding: 0;
	margin: 0;
}
.term-btn-list > ul > li {
	list-style: none;
	display: inline-block;
	margin: 0 5px 5px 0;
}
.term-btn-list > ul > li a {
	display: inline-block;
	border: 1px solid #428bca;
	border-radius: 5px;
	color: #428bca;
	padding: 10px;
	line-height: 1;
	white-space: nowrap;
	background-color: #fff;
}
.term-btn-list > ul > li a.selected,
.term-btn-list > ul > li a:hover,
.term-btn-list.term-selected > ul > li a {
	background-color: #428bca;
	color: #fff;
}
.term-btn-list > ul > li a.selected:hover,
.term-btn-list.term-selected > ul > li a:hover {
	background-color: #fff;
	color: #428bca;
}
a.close::before {
	content: "×";
	font-size: 1.5em;
	line-height: 0;
	padding-right: 0.3em;
}
.term-btn-list.term-selected > ul > li a.reset {
	background-color: #000;
	border-color: #000;
	color: #fff;
}
.term-btn-list.term-selected > ul > li a.reset:hover {
	background-color: #fff;
	color: #000;
}
/* タクソノミーアーカイブ：関連コンテンツ */
.relational-contents {
	margin-top: 50px;
	background-color: #f0f0f4;
	font-size: 1.3rem;
	color: #444;
	padding: 15px 15px;
}
.relational-contents h2 {
	font-size: 1.6rem;
	color: #444;
	font-family: initial;
	font-weight: bold;
}
.sample_count p:last-child{
	background-color:#e2e2e2;
	display: inline-block;
}
@media ( min-width: 600px ) {
	.sample_count {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}
/* singleportfolio */
.single-portfolio .portfolio h4,
.single-portfolio .portfolio h3,
.single-portfolio .portfolio h2 {font-weight:bold;font-size:1.7rem;line-height:1.61;margin-bottom:2%;padding:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.single-portfolio .portfolio p {font-size:1.5rem;}
.single-portfolio .portfolio p+h4,
.single-portfolio .portfolio p+h3,
.single-portfolio .portfolio p+h2 {padding-top:15px;}
.single-portfolio .portfolio p.note{font-size:1.2rem;}
.single-portfolio .portfolio table thead tr th{background-color:#f0f0f4}
.single-portfolio .portfolio table tr th{font-weight:bold}
.single-portfolio .portfolio .subcontents {margin: 30px 0;padding-top: 15px;border-top: 1px solid #eee;}
.single-portfolio .portfolio .subcontents h3 {font-size:1.5rem;}
.single-portfolio .portfolio .subcontents p,
.single-portfolio .portfolio .subcontents li {font-size:1.3rem;}
.single-portfolio .portfolio .portfolionav{font-size:2.0rem;text-align: center;float:none;}
.single-portfolio .portfolio .portfolionav a{background-color:rgba(0,0,0,0.3);}
.single-portfolio .pcbelow {padding: 10px 0;background-color: #f0f0f4;margin-bottom: 1.6rem;border: 0;}
.single-portfolio .portfolio .portfolio-content li {font-size: 1.4rem;word-break: break-all;}
.relational-link {
    margin: 30px 0;
    padding: 10px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.relational-link li {
	color: #999;
    list-style: none;
	display: inline-block;
	padding-right: 20px;
	font-size: 90%;
}
/* サイドバー（制作例の絞り込みメニュー） ----------------------------------------- */
/* 検索ボックス */
.sample-search {width:100%;}
.sample-search input[type="text"],
.sample-search button[type="submit"]{border:2px solid #ccc;padding:3px;font-size:1.5rem;}
.sample-search input[type="text"]{width:calc(100% - 70px);margin-right:5px;}
.sample-search button[type="submit"]{width:65px;background-color:#000;color:#fff;border-color:#000;}
/* タームの絞込みリスト */
.toggle {
	display: none;
}
.toggle-sidear-wrapper {
	border: 2px solid #428bca;
	border-radius: 5px;
	margin-bottom: 30px;
}
.term-selection-toggle {
	text-align: center;
	color: #428bca;
	padding: 10px;
	cursor: pointer;
	font-size: 1.4rem;
}
.term-selection-toggle::before {
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #428bca;
	border-right: 2px solid #428bca;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.term-selection-wrapper {
	height: 0;
	padding: 0 20px;
	overflow: hidden;
}
.term-selection-wrapper,
.term-selection-toggle {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.toggle:checked + .term-selection-toggle + .term-selection-wrapper{
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .term-selection-toggle::before {
	transform: rotate(-45deg) !important;
}
.term-selection:not(:last-child) {
	margin-bottom: 30px;
}
.title-filter {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 5px;
}
.term-selection > .title-filter {
	margin-bottom: 10px;
	border-bottom: 2px solid #000;
}
.term-selection > a {
    display: block;
    padding: 10px 10px 10px 30px;
    position: relative;
	font-size: 1.2rem;
	color: #444;
	background-color: #fff;
}
.term-selection > a::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    border: 1px solid #000;
}
.term-selection > a.selected::before {
	background-color: #428bca;
	border-color: #428bca;
}
.term-selection > a.childterm {
	margin-left: 30px;
}
.term-selection > a:hover {
	background-color: #f1f1f1;
}

@media (min-width: 992px) {
	.term-selection-wrapper {
		display: block;
		height: auto;
		padding: 0;
		background-color: inherit;
	}
	.term-selection-toggle {
		display: none;
	}
	.toggle-sidear-wrapper {
		border: none;
	}
}
.term-selection a[class^=color-] {position: relative;}
.term-selection a[class^=color-]:after{content:"";position: absolute;left:100px;width:18px;height:18px;}
.term-selection a.color-147:after {background-color: blue;}
.term-selection a.color-146:after {background-color: green;}
.term-selection a.color-145:after {background-color: orange;}
.term-selection a.color-144:after {background-color: red;}
.term-selection a.color-149:after {background-color: pink;}
.term-selection a.color-148:after {background-color: purple;}
.term-selection a.color-150:after {background-color: brown;}
.term-selection a.color-156:after {background-color: black;}
.term-selection a.color-152:after {background-color: gray;}
.term-selection a.color-151:after {background-color: white;border:1px solid #eee;}





/* 削除予定
div.nav-links{margin-bottom:14px}
div.nav-links .current{background-color: #5d5d5d;color: #fff!important}
div.nav-links .page-numbers{color: #000;border:none;font-size:1.8rem}
*/