@charset "utf-8";

/*
	Theme Name: result
	Theme URI: オリジナル
	Description: 実績サイト用
	Version: 2
	Author: otsuka
	Author URI: なし
*/

body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

	/*コンテンツ内容が少ないとき、一番下に配置させる用*/
	display: flex;
	flex-direction: column;
  	min-height: 100vh;
	background-color: #e7e7e7;
}

/*IE用---------------------------*/
@media screen\0 {
 	body {
		display: block
	}
}

/* レイアウト
------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, p, table, ul, dl, ol, a {
    transform: rotate(0.05deg);
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 25px;
}
h3 {
    font-size: 23px;
}
h4 {
    font-size: 21px;
}
a:hover {
    text-decoration: none;
}
p, ol, dd, li, dt {
    font-size: 16px;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.7px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
table {
    width: 100%;
    border-spacing: 0;
}
a {
    font-size: 16px
}

/*汎用クラス*/
.white-space {
    white-space: nowrap;
}
.sky-blue {
    color: #47bdec
}
.font_ss {
    font-size: 10px;
}
.text_red {
    color: #cd3464;
}
.white_box {
    background: rgba(255,255,255,.8);
    padding: 15px;
}

/*コンテンツの余白*/
.content {
	padding-top: 50px;
	padding-bottom: 50px
}
.content_pt {
	padding-top: 50px;
}
.content_pb {
	padding-bottom: 50px;
}
.content-ipad {
	max-width: 100%;
	padding-top: 50px;
	width: 100%;
}
.content-sp-mt {
	margin-top: 130px
}
#toppage .content-sp-mt {
	margin-top: 45px
}

/* 共通部分
------------------------------------------------------------*/
/*ヘッダー------------------*/
.logo {
	width: 180px;
	height: auto
}

.site-subtitle {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}




/*ログイン+お問い合わせ*/
.header-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #00a0e9;
    transition: background-color 0.5s;
    position: relative;
    height: 45px;
}
.header-btn:hover {
    background: #0676ad
}
.header-btn a {
	font-size: 14px;
    width: 100%;
    padding: 20px 0;
	color: #fff;
	line-height: 1.5em
}

/*plan gnav（共通）*/
nav.plan_nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}
nav.plan_nav a {
    color: #fff;
    transition: background-color 0.5s;
	display: block;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 75px;
    max-height: 100%
}
nav.plan_nav li {
	padding: 0
}

/*plan gnav各背景色*/
nav.plan_nav li:first-of-type a {
    background-color: rgba(65, 171, 216, 0.9);
}
nav.plan_nav li:first-of-type a:hover {
    background-color: #41ABD8;
}
nav.plan_nav li:nth-child(2) a {
    background-color: rgba(21, 146, 198, 0.9)
}
nav.plan_nav li:nth-child(2) a:hover {
    background-color: #1592C6
}
nav.plan_nav li:nth-child(3) a {
    background-color: rgba(6, 118, 173, 0.9)
}
nav.plan_nav li:nth-child(3) a:hover {
    background-color: #0676AD
}
nav.plan_nav li:nth-child(4) a {
    background-color: rgba(235, 131, 15, 0.9)
}
nav.plan_nav li:nth-child(4) a:hover {
    background-color: #eb830f
}

/*plan gnav　文字*/
.plan-title {
	font-size: 16px;
}
nav.plan_nav p {
    margin-bottom: 0;
    line-height: 1.5em;
}

/*category nav----------------*/
/*category gnav（全体）*/
.category_nav {
    border-bottom: 1px solid #47bdec
}
.category_nav-left, .category_nav-center, .category_nav-right {
    vertical-align: middle
}
.category_nav-left, .category_nav-right {
	/* width: 49% */
}
.category_nav-left {
	padding-left: 10px
}
.category_nav-center {
    width: 100%;
	position: absolute;
	top: 105px;
	left: 0;
	margin: 0 auto;
    text-align: center
}

/*category gnav（ハンバーガーメニュー）*/
.category_nav a.menu_button:before,
.category_nav a.menu_list_open:before {
    content: "";
    background: url(images/menuOpen.png) 0 0 no-repeat;
    position: absolute;
    /* top: 3px; */
    top: 0;
    left: -13px;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom
}
.category_nav a.menu_list_open:before {
    background: url(images/menuOpen.png) no-repeat 0 -42px;
}
.category_nav a.menu_button {
    color: #47bdec;
    text-shadow: 0 0 0.1px rgba(71, 189, 236, 0.5);
    padding-left: 13px;
    font-size: 20px;
    cursor: pointer;
    position: relative
}
/*IEのみ*/
@media all and (-ms-high-contrast: none) {
    .category_nav a.menu_button:before,
	.category_nav a.menu_list_open:before {
        top: 2px;
    }
}
.category_nav a:hover.menu_button {
    color: #0676ad
}

/*category gnav（category一覧）*/
.menu_list {
    position: absolute;
    left: -5000px;
    top: 70px;
    /* opacity: .5; */
    z-index: 100;
    /* background: #f7f7f7; */
    background: rgba(247,247,247,.5);
    
    width: 100%;
	/* height: 850px; */
    height: auto;
    min-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
    transition:all 0.6s ease;
}
.menu_list_on {
    background: rgba(247,247,247,.95);
}
.menu_list ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.menu_list ul li {
    /* margin-right: 15px; */
    margin-right: 25px;
}
.menu_list ul li label {
    font-size: 17px;
    margin-bottom: 1.2rem;
}
.menu_list ul li label input[type=checkbox] {
    margin-right: 5px;
}
.menu_list input[type=submit] {
    margin: 0 auto 80px auto;
    display: block;
    background: #057dba;
    width: 230px;
    font-size: 16px;
    text-align: center;
    padding: 14px;
    color: #fff;
    line-height: 1em;
    border: none;
    transition:all 0.4s ease;
}
.menu_list input[type=submit]:disabled {
    background: rgba(5,125,186,0.4);
}


ul.dot li::before {
    content: '・';
}

.menu_list a {
    /* color: #000;
    font-size: 20px;
    padding: 20px 10px 30px;
    text-align: center;
    display: block */
}
.menu_list_ul .menu_list_li a {
    font-size: 16px;
    width: 100%;
    padding: 7px 10px 10px 50px;
    text-align: left
}
.menu_list_ul .menu_list_li a:hover {
    color: #fff;
    background: #616161;
}

/*---------------------------------- category一覧の色分け　ここから ------------------------------------------*/
/*category gnav（category一覧の色分け）-----------*/
.menu_list_ul .menu_list_li {
    position: relative
}
.menu_list_ul .menu_list_li::before {
    content: "";
    display: inline-block;
    background: #616161;
    width: 20px;
    height: 10px;
    position: absolute;
    left: 13px;
    top: 15px;
    z-index: 1
}
/*.categoryA2::before {
    background: #00a0e9
}*/


/*★色追加-----------*/
/*お知らせ*/
.category-list .news,
.menu_list_ul .news::before {
    background-color: #00a0e9;
}
/*ブログ*/
.category-list .blog,
.menu_list_ul .blog::before {
    background-color: #9514ba
}
/*CMS*/
.category-list .cms,
.menu_list_ul .cms::before {
    background-color: #00A6C1
}
/*病院・医療関係*/
.category-list .medical,
.menu_list_ul .medical::before  {
    background-color: #2a2a2a
}
/*教育*/
.category-list .education,
.menu_list_ul .education::before  {
    background-color: #58C01F
}
/*美容院・理容室*/
.category-list .hairdresser,
.menu_list_ul .hairdresser::before  {
    background-color: #FF72F9
}
/*自動車*/
.category-list .car,
.menu_list_ul .car::before  {
    background-color: #F33538
}
/*不動産*/
.category-list .real-estate,
.menu_list_ul .real-estate::before  {
    background-color: #0B7725
}
/*マッサージ・整体*/
.category-list .massage,
.menu_list_ul .massage::before  {
    background-color: #EB4EDB
}
/*買取・リサイクル業*/
.category-list .recycling,
.menu_list_ul .recycling::before  {
    background-color: #26FF8F
}
/*広告掲載場所　外*/
.category-list .outdoor-ad,
.menu_list_ul .outdoor-ad::before  {
    background-color: #413ee0
}


/*---------------------------------- category一覧の色分け　ここまで ------------------------------------------*/

/*特徴　価格携帯*/
/* .list-icon li:last-of-type {
	margin-left: 25px;
} */
.arrow {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.arrow::before {
    content: "";
    background: url(images/arrow-blue.png)no-repeat;
    width: 15px;
    height: 14px;
    background-size: contain;
    margin-right: 10px;
}
.list-icon li a {
	color: #47bdec;
	font-size: 20px
}
.list-icon li a:hover {
    color: #0676ad;
}

/*main*/
main {
    background-color: #e7e7e7;
    /* overflow: hidden; */
    overflow-y: scroll;
	min-height: 850px
}

/*button（共通）*/
.blue-btn {
    background: #41abd8;
    border: #41abd8;
    margin: 0 auto;
    display: block;
    position: relative;
    transition: 1s;
}
.blue-btn a {
    color: #fff;
    width: 100%;
    display: block;
    padding: 10px 50px 10px 40px;
}
.blue-btn:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    transition: 0.3s linear
}
.blue-btn::before {
    content: "";
    background: url(images/arrow.png)no-repeat center/contain;
    width: 20px;
    height: 25px;
    position: absolute;
    right: 10px;
    top: 10px
}

/*button（大きめ）*/
.here-btn {
	min-width: 100%
}
.here-btn a {
	font-size: 22px;
}
.here-btn.blue-btn::before {
	top: 17px
}

/*footer*/
footer {
    background: #2a2a2a;
    color: #fff;
    padding: 10px 0;
	margin-top: auto; /*コンテンツ内容が少ないとき、一番下に配置させる*/
}
footer .copyright {
    text-align: center;
    margin-bottom: 0;
}

/*li 黒丸*/
.list-disc {
    list-style: disc
}
.list-disc li {
    margin-left: 20px;
    font-size: 14px
}

/*メインビジュアル*/
.bg_header {
    height: 400px;
    min-height: 300px;
	overflow: hidden;
	position: relative;
    width: 100%;
    background: url(images/mainimg.jpg) no-repeat center center/cover;
}

/*サイト一覧のタイトル*/
.title_site_layout {
	font-size: 25px;
    height: 2.4em;
}

/*ページャー*/
.wp-pagenavi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    text-align: center;
    margin-bottom: 50px;
}
.wp-pagenavi a, .wp-pagenavi span {
	margin-right: 20px;
	margin-bottom: 20px;
    color: #2a2a2a;
    background-color: #fff;
	padding: 6px 10px!important;
	border: 1px solid #2a2a2a!important;
}
.wp-pagenavi .current{
	border: 1px solid #2a2a2a;
    color: #fff;
	background: #2a2a2a
}
.wp-pagenavi a:hover {
    background-color: #2a2a2a;
    color: #fff;
}


/*特徴ページ
-----------------------------------------------------------------------------*/
/*point3つ*/
.three-point-list li  {
    color: #fff;
    padding: 20px;
}
.three-point-list li:not(:first-of-type) {
    margin-top: 80px;
}
.three-point-list li:nth-child(1) {
    background: #2a2a2a url(images/point1-img.png) no-repeat;
    background-position: center;
    background-size: 150px;
}
.three-point-list li:nth-child(2) {
    background: #434343 url(images/point2-img.png) no-repeat;
    background-position: center;
    background-size: 150px;
}
.three-point-list li:nth-child(3)  {
    background: #707070 url(images/point3-img.png) no-repeat;
    background-position: center;
    background-size: 150px;
}
/*point3つ　数字アイコン*/
.three-point-list li::before {
    content: "";
    background: url(images/point1-icon.png)no-repeat 0 0/contain;
    width: 70px;
    height: 70px;
    position: relative;
    left: 0;
    top: -60px;
    display: block;
    margin: 0 auto
}
.three-point-list li:nth-child(2):before {
    content: "";
    background: url(images/point2-icon.png)no-repeat 0 0/contain;
}
.three-point-list li:nth-child(3):before {
    content: "";
    background: url(images/point3-icon.png)no-repeat 0 0/contain;
}
/*point3つ　point*/
.three-point-list li::after {
    content: "point";
    color: #212529;
	font-size: 2rem;
	font-weight: bold;
	top: -15%;
    left: 50%;
    transform: translate(-50%, -50%);
	position: absolute;
}
/*point3つ　テキスト*/
.three-point-list li>p {
    margin-bottom: 40px;
}
.three-point-list .three-point-list_title {
    position: relative;
    margin-bottom: 1em;
    text-indent: 0;
    border-left-width: 0;
}
.three-point-list .three-point-list_title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 60px;
    height: 5px;
    transform: translateX(-50%);
    background-color: #b2b2b2
}

/*タイトル　左に四角*/
.title_left_border {
	margin-top: 30px;
    margin-bottom: 20px;
	padding-left: 20px;
    font-weight: normal;
    border-left: 10px solid #2F2F2F;
}

/*更新例*/
.updateDl {
    margin-top: 30px;
    margin-bottom: 20px;
	border-top: 1px dashed #373737;
	padding-top: 20px;
}
.updateDl div {
    width: 100%;
}
.updateDl dt {
    font-size: 25px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 2em;
    min-height: 165px;
}
.updateDl:nth-of-type(1) dt {
    background-image: url(images/update1b.png);
}
.updateDl:nth-of-type(2) dt {
    background-image: url(images/update2b.png);
}
.updateDl:nth-of-type(3) dt {
    background-image: url(images/update3b.png);
}
.updateDl:nth-of-type(4) dt {
    background-image: url(images/update4b.png);
}
.updateDl:nth-of-type(1) dd:nth-child(2)::after {
    content: " ";
    background-image: url(images/update1.png);
}
.updateDl:nth-of-type(2) dd:nth-child(2)::after {
    content: " ";
    background-image: url(images/update2.png);
}
.updateDl:nth-of-type(3) dd:nth-child(2)::after {
    content: " ";
    background-image: url(images/update3.png);
}
.updateDl:nth-of-type(4) dd:nth-child(2)::after {
    content: " ";
    background-image: url(images/update4.png);
}
.updateTable {
    font-size: 14px;
    margin-top: 15px
}
.updateTable tbody, .updateTable tr, .updateTable th, .updateTable td {
	display: block;
}
.updateTable tr {
    border-bottom: 5px solid #e7e7e7;
}
.updateTable th {
    background-color: #2E2E2E;
    color: #FFFFFF;
    font-weight: normal;
    text-align: center;
}
.updateTable td {
    padding-left: 10px;
}

/*他社比較表------------*/
.compare-table {
    border: 1px #fff solid;
}
.scroll {
    overflow-x: scroll;
    white-space: nowrap;
}
.scroll::-webkit-scrollbar{ /* スクロールバー全体 */height: 10px;}
.scroll::-webkit-scrollbar-thumb{ /* スクロールバー*/background: #BCBCBC;}
.scroll::-webkit-scrollbar-track-piece:start{ /* スクロールバーが表示されてない部分（前） */background: #F1F1F1;}
.scroll::-webkit-scrollbar-track-piece:end{ /* スクロールバーが表示されてない部分（後ろ） */background: #F1F1F1;}

/*他社比較表 １列目*/
.compare-table th:first-child, .compare-table td:first-child {
    background: #2a2a2a;
    color: #fff;
    text-align: right;
    width: 20%
}

/*他社比較表 ２列目*/
.compare-table th:nth-child(2) {
    background: #41abd8;
    color: #fff;
    text-align: center;
    width: 20%
}
.compare-table td:nth-child(2) {
    background: #d9e1f2;
    color: #0070c0;
    text-align: center;
    font-weight: 300;
    font-size: 20px;
}

/*他社比較表 ３，５列目～（3列目から始まり2列ずつ飛ばす）*/
.compare-table th:nth-child(2n+3) {
    background: #ffad47;
    color: #fff;
    text-align: center;
    width: 20%
}
.compare-table td:nth-child(2n+3) {
    background: #ffefda;
    color: #ed7426;
    text-align: center
}

/*他社比較表 ４、６列目～（4列目から始まり2列ずつ飛ばす）*/
.compare-table th:nth-child(2n+4) {
    background: #ff8435;
    color: #fff;
    text-align: center;
    width: 20%
}
.compare-table td:nth-child(2n+4) {
    background: #ffe0b4;
    color: #ed7426;
    text-align: center
}

/*下層ページ
-----------------------------------------------------------------------------*/
/*サイト一覧ページ----------------------------------------*/
/*サイト画像*/
/* .site_list img,
.video {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
} */
.site_list > li > div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}


.site_list .label_name {
    display: inline;
    display: none;
    position: absolute;
    bottom: -0.4px;
    right: 0;
    z-index: 9999;
    background: rgba(236, 181, 118,0.9);
    color: #fff;
    line-height: 1;
    padding: 6px 7px 5px 8px;
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
    border-radius: 4px 0 0 0px;
}

/*カテゴリラベル-----------*/
.category-list {
    gap: 8px 10px;
    display:flex;
    flex-wrap: wrap;
}
.category-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*カテゴリラベル（大）------*/
.cat_lg {
    width: calc( 50% - 5px);
    font-weight: bold;
}
.cat_lg a {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 2.4;
    display: block;
}

/*カテゴリラベル（小）------*/
.cat_sm {
    order:2;
    background-color: #7fa;
}
.cat_sm a {
    color: #fff;
    padding: 0 12px;
    width: 100%;
    display: block;
    font-size: 12px
}

/*カテゴリラベル（個別）------*/
/* 業種 */
.business_category {
    order:0;
    background: #fff;
}
.business_category a {
    color: #333;
}

/* 制作費 */
.production_cost {
    order:1;
    /* background: #d16d6a; */
    background: #b5335b;
}
.production_cost a {
    color: #fff;
}
.production_cost a::before {
    content: '制作費：';
}

/* 掲出期間 */
.period-print,
.period-movie,
.period-other {
    background-color: #3c78d8;
    order:2;
}
.period-print a::before,
.period-movie a::before,
.period-other a::before {
    content: '掲出期間：';
}

/* 年間費用・掲出費用 */
.annual_cost-web,
.annual_cost-print,
.annual_cost-other {
    /* background-color: #f9db78; */
    background-color: #b08b0f;
    order:3;
}
.annual_cost-web a::before {
    content: '年間運用費用：';
}
/* .annual_cost-movie a::before,*/
.annual_cost-print a::before,
.annual_cost-other a::before {
    content: '掲出費用：';
}

/* 目的 */
.objective-print,
.objective-movie,
.objective-other {
    background-color: #09a9a9;
    order:4;
}

/* 媒体・構成 */
.structure-web,
.media-print,
.media-movie,
.media-other {
    background-color: #6aa84f;
    order:5;
}

/* 秒数 *//* 元：.location-movie,.location-other 配信場所（動画制作）*/
.seconds-movie { background-color: #a64d79;
    order:6;
}

/* 制作会社 */
.production_company-movie {
    background-color: #0b5394;
    order:7;
}

.cat_child,
.cat_child a {
    background-color: #fff;
    color: #6aa84f;
    border: 1px solid #6aa84f;
}



/*各サイトの項目 プラン------*/
/*共通*/
.plan-lite-color a, .plan-standard-color a, .plan-premium-color a {
    color: #fff;
    width: 100%;
    display: block;
    padding: 5px 0
}




/*ライトプラン*/
.plan-lite-color {
    background: #5a5a5a;
    border: 2px solid #5a5a5a;
    margin-bottom: 10px;
    width: 48%;
    text-align: center
}

/*スタンダードプラン*/
.plan-standard-color {
    background: #41abd8;
    border: 2px solid #41abd8;
    margin-bottom: 10px;
    width: 48%;
    text-align: center
}

/*プレミアムプラン*/
.plan-premium-color {
    background: #dba738;
    border: 2px solid #dba738;
    margin-bottom: 10px;
    width: 48%;
    text-align: center
}

/*各サイトの項目 料金*/
.price-color {
    border: 2px solid #41abd8;
    margin-bottom: 10px;
    width: 48%;
    text-align: center;
	color: #41abd8;
    font-weight: bold;
	padding: 5px 0
}
li.price-color {
    font-size: 14px;
}




/* スクリーンショット------ */
.browser-shot img {
	max-width: 100%;
	height: auto
}

/* 動画埋め込み------ */
.video {
    position: relative;
    height: 0;
    padding: 0 0 75.142%;
    overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*価格表ページ----------------------------------------*/
/*プランリスト*/
.price-list>li {
	margin-top: 40px
}
.price-list>li:nth-of-type(2) {
	z-index: -10
}
.price-list>li:last-child {
	z-index: -20
}
.price-list>li>div {
    background: #fff;
    border: 5px #47bdec solid;
    padding: 15px 0 0;
    position: relative
}
.price-list .price-list_title {
    position: absolute;
    background: #434343;
    color: #fff;
    top: -20px;
    left: 0;
    right: 0;
    margin: 0px 20px;
    padding: 10px;
	font-size: 18px
}

/*青色の値段*/
.price-list .price-list_price {
    position: relative;
    margin-bottom: .5em;
    color: #47bdec;
    font-size: 40px
}
.price-list .price-list_price::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 60px;
    height: 5px;
    transform: translateX(-50%);
    background-color: #47bdec
}

/*アコーディオン*/
.price-list .price-list_accordion {
    position: relative;
    text-indent: 0;
    border-left-width: 0;
    cursor: pointer;
    margin-bottom: 9px;
	font-weight: normal
}
.price-list .price-list_accordion::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 90%;
    height: 5px;
    transform: translateX(-50%);
    background-color: #47bdec
}
.price-list .price-list_accordion span.arrow-icon::after, .price-list .price-list_more_title span.arrow-icon2::after {
    content: "∧";
    color: #47bdec;
    position: absolute;
    right: 20px;
}
.price-list .price-list_accordion span.arrow-icon2::after {
    content: "∨";
}

/*プラン 項目*/
.price-list-item li {
    position: relative
}
/*奇数*/
.price-list-item li:nth-child(odd) {
    background: #e7e7e7;
    padding: 10px;
    padding-left: 50px
}
/*偶数*/
.price-list-item li:nth-child(even) {
    padding: 10px;
    padding-left: 50px
}

/*？アイコン*/
.price-list-item li span.question-icon, .price-table td span.question-icon {
    position: absolute;
    background: url(images/question-icon.png) no-repeat center/contain;
    width: 25px;
    height: 25px;
    right: 10px;
    cursor: pointer;
}

/*鍵アイコン*/
.price-list-item li.key-icon {
    color: #b3b3b3
}
.price-list-item li.key-icon::after {
    content: '';
    position: absolute;
    background: url(images/key-icon.png) no-repeat center/contain;
    left: 12px;
    width: 25px;
    height: 25px;
}

/*チェックアイコン*/
.price-list-item li.check-icon::after {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    position: absolute;
    left: 15px;
    color: #47bdec;
    font-weight: bold;
    font-size: 20px
}

/*プラン　box*/
.sky-blue-box {
    background: #47bdec;
    padding: 20px 20px 20px 30px;
    color: #fff;
    margin: 0 17px;
    display: none
}
.sky-blue-box li {
    list-style: disc;
    line-height: 2em;
    font-size: 14px
}

/*プラン table*/
.price-table tr:nth-child(odd) th {
    background: #a0ddf5
}
.price-table tr:nth-child(even) th, .price-table tr:nth-child(odd) td {
    background: #c7ebf9
}

/*プラン table ？アイコン*/
.price-table td {
    position: relative
}
.price-table td.question-icon::after {
    top: 10px
}

/*プラン table ？アイコンに隠れているbox*/
.click-sky-blue-box {
    background: #47bdec;
    padding: 10px;
    position: absolute;
    bottom: 55px;
    left: 0;
    right: 0;
    z-index: 1;
    color: #fff;
    min-width: 260px;
    display: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
	white-space: normal;
}
.click-sky-blue-box a {
    color: #fff;
    background: #ff7e00;
    padding: 5px;
    border-radius: 5px;
    transition: 1s;
}
.click-sky-blue-box a:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    transition: 0.3s linear
}
.click-sky-blue-box a::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

/*プランリスト スクロール*/
.ipad-width {
	width: 1000px;
	margin-top: 40px;
}

/* スクロールバー関連*/
.ipad-scroll {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}
.ipad-scroll::-webkit-scrollbar-thumb {
	/* スクロールバー*/
	background: #BCBCBC;
}
.ipad-scroll::-webkit-scrollbar-track-piece:start {
	/* スクロールバーが表示されてない部分（前） */
	background: #F1F1F1;
}
.ipad-scroll::-webkit-scrollbar-track-piece:end {
	/* スクロールバーが表示されてない部分（後ろ） */
	background: #F1F1F1;
}
.ipad-scroll::-webkit-scrollbar {
	/* スクロールバー全体 */
	height: 10px;
}


/*お問い合わせページ----------------------------------------*/
.wpcf7-form {
    margin-top: 30px
}

.wpcf7-form label,
.wpcf7-form input,
.wpcf7-form textarea {
    max-width: 100%;
}

.wpcf7-form label,
.wpcf7-form-control-wrap input,
.wpcf7-form textarea {
	width: 100%
}


/* -------------------------------------------- */

/* ▼通常スマホ用デザイン　375px　（SEなど小さいサイズに指定したくない場合）　*/

/* -------------------------------------------- */

@media (min-width: 375px) {
	.category_nav-center {
		top: 75px;
	}

}


/* -------------------------------------------- */

/* ▼タブレット用デザイン　768px*/

/* -------------------------------------------- */

@media (min-width: 768px) {
    .site-subtitle {
        font-size: 42px;
    }

	/*メインビジュアル*/
	/* .bg_header {
		height: 400px;
	} */

	/*ログイン+お問い合わせ*/
    .header-btn a {
        font-size: 16px
    }

	/*plan gnav*/

    nav.plan_nav > ul {
        display: flex;
        justify-content: center;
    }

	nav.plan_nav li {
		padding: 0 15px
	}
	/*plan gnav　丸いアイコン*/
	nav.plan_nav li:first-child:before,
	nav.plan_nav li:nth-child(2):before,
	nav.plan_nav li:nth-child(3):before,
	nav.plan_nav li:nth-child(4):before {
		content: "";
		background: url(images/plan1.png)no-repeat 0 0/contain;
		width: 70px;
		height: 70px;
		position: relative;
		left: 0;
		top: 20px;
		display: block;
		margin: 0 auto;
		z-index: 1;
	}
	nav.plan_nav li:nth-child(2):before {
		content: "";
		background: url(images/plan2.png)no-repeat 0 0/contain;
        /* background: url(images/plan2.svg)no-repeat 0 0/contain; */
	}
	nav.plan_nav li:nth-child(3):before {
		content: "";
		background: url(images/plan3.png)no-repeat 0 0/contain;
	}
	nav.plan_nav li:nth-child(4):before {
		content: "";
		background: url(images/plan4.png)no-repeat 0 0/contain;
	}
	nav.plan_nav li:first-child:hover:before,
	nav.plan_nav li:nth-child(2):hover:before,
	nav.plan_nav li:nth-child(3):hover:before,
	nav.plan_nav li:nth-child(4):hover:before {
		animation: anim .5s ease-out forwards;
	}
	@keyframes anim {
		0% {
			transform: rotateY(0deg);
		}
		100% {
			transform: rotateY(360deg);
		}
	}
	nav.plan_nav a {
		min-height: 100px;
	}

	/*category gnav*/
	.menu_list>ul>li:nth-of-type(2) {
		border-left: 1px solid #dcdcdc;
	}
	.menu_list_ul .menu_list_li {
		margin: 20px 0
	}

	/*特徴ページ
	-----------------------------------------------------------------------------*/
	/*point3つ*/
	.three-point-list li:nth-child(1) {
		margin-top: 80px
	}

	/*更新例*/
	.updateDl {
		border-top: none;
		border-bottom: 1px dashed #373737;
		padding-top: 0;
	}
	.updateDl dt, .updateDl dd {
		float: left;
	}
	.updateDl dt {
		width: 20%;
	}
	.updateDl dd {
		width: 80%;
		margin-bottom: 20px
	}
	.updateDl dd::after {
		background-size: 100% auto;
		background-repeat: no-repeat;
		float: right;
		display: block;
		padding-top: 150px;
		width: 40%;
		height: 200px
	}
    .updateDl div {
        width: 50%;
		float: left;
    }
	.updateTable tbody {
		display: table-row-group;
	}
	.updateTable tr{
		display: table-row;
	}
	.updateTable th, .updateTable td {
		display: table-cell;
	}
	.updateTable th {
		width: 20%;
	}

	/*他社比較表*/
	.scroll {
		overflow-x: auto;
		white-space: normal;
	}

	/*下層ページ
	-----------------------------------------------------------------------------*/

	/*価格表ページ---------------------------------------*/
	/*プランリスト*/
	.price-list>li {
		margin-top: 0;
	}

    /*プランリスト スクロール*/
    .ipad-width {
		width: 1200px;
		margin-top: 15px
    }

}

/* 992px
------------------------------------------------------------*/

@media (min-width: 992px) {
	/*ログイン+お問い合わせ*/
	.header-btn a {
		padding: 20px 10px 20px 30px
	}
	.header-btn a::before {
		content: "";
		background: url(images/arrow.png)no-repeat center/contain;
		width: 17px;
		height: 25px;
		position: absolute;
		left: 15px;
	}

	/*button here*/
	.here-btn {
		min-width: 402px
	}
	.here-btn a {
		font-size: 30px;
	}
	.here-btn.blue-btn::before {
		top: 20px
	}

	/*footer*/
	footer {
        padding: 20px 0
    }

	/*コンテンツの余白*/
	.content-sp-mt {
        margin-top: 65px
    }
	.page-id-125 .content-sp-mt { /*当プランの特徴ページ*/
		margin-top: 0
	}

	/*下層ページ
	-----------------------------------------------------------------------------*/
	/*価格表ページ----------------------------------------*/
	/*プランリスト*/
    .price-list .price-list_title {
        font-size: 25px
    }
	/*チェックアイコン*/
    .price-list-item li.check-icon::after {
        left: 18px;
    }
	/*鍵アイコン*/
    .price-list-item li.key-icon::after {
        left: 15px;
    }
    /*プランリスト スクロール*/
    .ipad-width {
        max-width: 960px;
		width: auto;
    }
	.ipad-scroll {
        overflow-x: hidden
    }


	/*特徴ページ----------------------------------------*/
	/*サイト一覧　タイトル*/
	.category_nav-left {
		width: 23%;
	}
	.category_nav-center {
		width: unset;
		position: static;
	}
	.category_nav-right {
		width: 23%
	}


    .nav-sub {
        align-items: center;
        justify-content: space-between;
    }

}

/* -------------------------------------------- */

/* ▼PC用デザイン　1200px*/

/* -------------------------------------------- */

@media (min-width: 1200px) {

	/*ログイン+お問い合わせ*/
	.header-btn a {
		font-size: 18px;
	}

	/*plan gnav*/
	.plan-title {
		font-size: 18px;
	}

	/*特徴　価格携帯*/
	/* .list-icon li:last-of-type {
		margin-left: 40px;
	} */


	/*サイト一覧　タイトル*/
	.category_nav-left {
		width: 35%
	}
    .category_nav-right {
        width: 35%
    }


	/*下層ページ
	-----------------------------------------------------------------------------*/

	/*価格表ページ----------------------------------------*/
	/*プランリスト スクロール*/
    .ipad-width {
        max-width: 1140px;
    }

	/*サイト一覧ページ----------------------------------------*/
    /*サイト画像にhoverしたら出る虫眼鏡アイコン*/
	.browser-shot a {
		position: relative;
	}
	.browser-shot a::before {
		font-family: "Font Awesome 5 Free";
		content: "\f00e";
		position: absolute;
		display: block;
		left: 0;
		right: 0;
		top: 50%;
		color: #fff;
		transition: all 0.45s ease-in-out;
		text-align: center;
		z-index: 2;
		visibility: hidden;
		transform: scale(0.1);
		font-weight: bold;
		font-size: 100px;
		text-shadow: 2px 4px 0 #707072;
		height: 100%;
    	margin-top: -10px;
	}
	.browser-shot a:hover:before {
		transform: scale(1);
		visibility: visible;
	}
	/*サイト画像 hover時*/
	.browser-shot a img {
		transition: 0.5s;
	}
	.browser-shot a:hover img {
		opacity: .5;
		transition: 0.5s;
	}


}




.list-btn {
    background: #057db9;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}
.list-btn a {
    display: block;
    color: #fff;
    padding:6px 34px;
    width: 100%;
}



/* colorbox カスタマイズ */
#cboxOverlay {
    background: #333;
}
#cboxContent {
    background: none;
    overflow: unset;
}
#cboxClose {
    bottom: -9px;
    background: #fff;
    padding: 2px 10px 3px 10px;
    border-radius: 0 0 5px 5px;
    font-weight: bold;
}

.cboxItem {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}
.cboxItem img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input_text {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 6px;
    margin-bottom: 30px;
}