@charset "utf-8";
/*
Template: jstork
Theme Name: stork_custom
Theme URI:http://open-cage.com/stork/
*/

/*————————————————————-
固定ページ用目次
————————————————————-*/

div.mokuji{
	background: #edf6ff;
	padding: 1em 2em 1em;
	border: 1px solid #EEE;
	min-width: 90%;
	margin: auto;
	width: auto;
	display: table;
	font-size: 95%;
}

div.mokuji p.title{
	margin-bottom: .7em;
	text-align: center;
	font-weight: 700;
	margin: 0;
	padding: 0;
	
}

div.mokuji ul{
	
}

div.mokuji ul li {
	background: 0 0;
	list-style-type: none;
	list-style: none;
	
}

div.mokuji ul li:before{
	content: none;
}

div.mokuji li a {
	display: block;
	padding: .5em 0;
	border-top: 1px dotted #DDD;
}


/*————————————————————-
スマホグローバルメニュー背景色
————————————————————-*/
@media only screen and (max-width: 767px){
	.menu-sp a {
    background-color: #54B2CF !important;
    color: #ffffff !important;
	}
}

/*————————————————————-
関連記事ショートコード_blankのレイアウト崩れ防止
————————————————————-*/

.kanren_storkblank{
    overflow:hidden;
}

/*-------------------
TOC+カスタム
--------------------*/
#toc_container.toc_light_blue {
    background: #edf6ff !important;
}

/*-------------------
フォントサイズ変更
--------------------*/
.entry-content p{
	font-size: 12pt !important;
}
 
body {
     font-family: 'Sawarabi Gothic', sans-serif;
     font-size: 100%;
}

/*-------------------
サイドバープロフィール
--------------------*/
.sidebar-profile {
	width: 95%;
	font-size: .9em;
	background-image: url("https://ikusugimoto.com/wp-content/uploads/2018/08/P1033959.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top:45%;
	padding-bottom: 20px;
	margin: 0.5em auto 0;
	box-shadow: 0 2px 5px rgba(0,0,0,.13);
}

.profile-center{
	text-align: center;
}

/*プロフィール画像を丸くする*/
.profileimg{
	width: 30%;
	border-radius: 100px;
	margin-top: -10%;
	border: solid 4px #fff;
}

/*名前*/
.profile-name{
	font-size: 1.2em;
	font-weight: bold;
}

/*自己紹介文*/
.profile-font{
	font-size: 1.1em;
}

.sidebar-profile p{
	padding: 0 2em;
	text-align: justify;
}

/*SNSアイコンリスト*/
ul.sns-follow {
	text-align: center;
}
ul.sns-follow .fa{
	padding-left: 9px;
}

ul.sns-follow li{
	display: inline-block;
	height: 45px;
	margin:0 2px;
	vertical-align: middle !important;
	margin-bottom: 0;
}

ul.sns-follow li a {
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 50px;
	color: #FFFFFF;
}

ul.sns-follow a:hover {
	opacity: 0.6;
	color: #FFFFFF;
}

/*Twitterボタン*/
ul.sns-follow li.twitter-btn a{
	background: rgba(29,161,242,0.7);
	line-height: 55px;
}

/*Facebookボタン*/
ul.sns-follow li.facebook-btn a{
	background: rgba(59,89,153,0.7);
	line-height: 55px;
}

/*Instagramボタン*/
ul.sns-follow li.instagram-btn a{
	background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	line-height: 55px;
}

/*YouTubeボタン*/
ul.sns-follow li.youtube-btn a{
	background: #FF0101;
	line-height: 55px;
}

/*-------------------
PC/SPクラス分け
--------------------*/
.pc { display: block !important; }
.sp { display: none !important; }

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

/*-------------------
要素float
--------------------*/

/*左寄せfloat*/
.left35{
	width: 35%;
	float: left;
}

/*右寄せfloat*/
.right65{
	width: 65%;
	float: right;
}

/*-------------------
固定ページh1編集
--------------------*/
#post-40 h1, #post-43 h1,#post-163 h1{
	text-align: center;
   border-top: solid 2px #B3B3B3;
   border-bottom: solid 2px;
   padding-top: 5px;
   padding-bottom: 5px;
}

/*-------------------
h1非表示
--------------------*/
#post-57 h1, #post-60 h1, #post-84 h1, #post-88 h1, #post-94 h1{
	display: none;
}

/*-------------------
問い合わせフォームボックス編集
--------------------*/
input, textarea{
	margin-top: 5px;
}

/*-------------------
ヘッダーバー透過
--------------------*/
.header.bg, .header #inner-header, .menu-sp {
    background: #252525b0 !important;
}

/*-------------------
SPヘッダーメニューセンター揃え
--------------------*/

@media only screen and (max-width: 767px){
	.menu-sp li {
    text-align: center;
}
}

/*-------------------
フッターバー背景色
--------------------*/

#footer-top.bg, #footer-top .inner, .cta-inner {
    background-color: #000000 !important;
}
.footer.bg, .footer .inner {
    background-color: #000000 !important;
}

/*-------------------
ロゴサイズ変更
--------------------*/

@media only screen and (min-width: 768px){
#logo img {
    max-height: 55px !important;
}
}

/*-------------------
プロフィールページカスタマイズ
--------------------*/

section.profile h2{
    width: 64%;
    background-color: #fff;
    color: #000;
    float: right;
    margin-top: 0;
    margin-bottom: 10px;
    border-top: solid 2px #B3B3B3;
    border-bottom: solid 2px #000;
    padding: 5px 0 0 10px;
}
section.profile h2:after{
    content: "Iku SUGIMOTO";
    font-size: 60%;
    color: #B3B3B3;
    display: block;
    margin-left: 10px;
}
@media only screen and (max-width: 750px) {
	section.profile h2{
    width: 65%;
	 margin-top: 0px;
	}
}
section.profile img{
   width: 33%;
	float: left;
	margin-right: 15px;
}
	section.profile div.title{
		font-size: 80%;
		clear: right;
	}

/*-------------------
お客様の声ページカスタマイズ
--------------------*/
.voice_box {
	width: 48%;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
	border: solid 2px #676767;
	padding: 0 5px 10px;
}
@media only screen and (max-width: 750px) {
	.voice_box {
		width: 100%;
		float: none;
	}
}

.voice_box iframe{
	height: 240px !important
} 
@media only screen and (max-width: 750px) {
.voice_box iframe{
	height: 190px !important;
	}
}

.voice_box h2{
	position: relative;
	padding-top: 20px;
	font-size: 20px;
	margin: 0.5em auto  !important;
	padding-top: 1.3em;
	padding-bottom: 0.5em;
}
.voice_box h2::before{
	position: absolute;
	content: attr(title);
	top:0;
	font-size: 12px;
	font-weight:normal;
	color:#999;
}

/*-------------------
制作事例ページカスタマイズ
--------------------*/
.gallery{
	margin-bottom: 20px;
}

.gallery_box {
	width: 48%;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
	border: solid 2px #676767;
	padding: 0 5px 10px;
}

.gallery_text {
	width: 50%;
	float: right;
	font-size: 90%;
}

@media only screen and (max-width: 750px) {
	.gallery_box {
		width: 100%;
		float: none;
	}
.gallery_text {
	width: 100%;
	float: none;
}
}

.gallery_box iframe{
	height: 240px !important
} 
@media only screen and (max-width: 750px) {
.gallery_box iframe{
	height: 190px !important;
	}
}

.gallery_box h2{
	position: relative;
	padding-top: 20px;
	font-size: 20px;
	margin: 0.5em auto  !important;
	padding-top: 1.3em;
	padding-bottom: 0.5em;
	background: #909090 !important;
}
.gallery_box h2::before{
	position: absolute;
	content: attr(title);
	top:0;
	font-size: 12px;
	font-weight:normal;
	color:#ebff00;
}

.gallery_text h3{
	margin-top: 0;
}

.gallery_text h4{
    margin: 20px auto -10px;
}

.gallery_text ul li{ 	
    display: inline;
    margin-right: 15px;
	white-space:nowrap;
 } 
@media only screen and (max-width: 750px){
.gallery_text ul li{ 	
    display: block;
    margin-right: auto;
	white-space: inherit;
 } 	
}

/*-------------------
ボタン追加CSS
--------------------*/
.btn-wrap.simple-gray a {
	border: 1px solid #676767;
	background: none;
	color: #676767;
}
.btn-wrap.simple-gray a:hover {
	border-color: #E17D30;
	background: #676767;
	color: #fff;
}



/*-------------------
アンダーマーカー
--------------------*/
.undermarker_rightyellow {
  background: linear-gradient(transparent 60%, #FFF0CD 0%); 
}

.undermarker_yellow {
  background: linear-gradient(transparent 60%, #FFFF3B 0%); 
}

/*-------------------
見出し追加CSS
--------------------*/
h2.video {
	position: relative !important;
   padding: 0.5em 1.5em 0.5em !important;
   border-top: dashed 2px #3E3E3E !important;
   border-bottom: dashed 2px #3E3E3E !important;
	background: #fff !important;
	color: #3E3E3E !important;
	margin: 1.5em auto !important;
	font-size: 1.5em !important;
}

h2.video:before{ 
	font-family: "FontAwesome";/*忘れずに*/
	content: "\f03d";/*アイコンのユニコード*/
	position: absolute;/*絶対位置*/
	font-size: 1em;/*サイズ*/
	left: 0.25em;/*アイコンの位置*/
	top: 0.5em;/*アイコンの位置*/
	color: #3E3E3E; /*アイコン色*/
}

@media only screen and (max-width: 767px){
	h2.video{
		font-size: 1.4em !important;
	}
}

h3.gori{
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding-bottom: 18px !important;
    border-bottom: 4px solid #eee !important;
    color: #111 !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    font-size: 20px !important;
    position: relative !important;
    z-index: 1 !important;
	 border-left: none !important;
	 padding: 0.7em 0 0.8em !important;
}

h3.gori::after{
    content: '';
    position: absolute !important;
    bottom: -4px !important;
    left: -5px !important;
    width: 164px !important;
    height: 4px !important;
    background-image: url(https://ikusugimoto.com/wp-content/uploads/2020/01/icon-heading-2.png);
    background-repeat: no-repeat !important;
    background-size: auto 4px !important;
}

/*ゴリ見出しブルーver.*/
h3.goriblue{
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding-bottom: 18px !important;
    border-bottom: 4px solid #eee !important;
    color: #111 !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    font-size: 20px !important;
    position: relative !important;
    z-index: 1 !important;
	 border-left: none !important;
	 padding: 0.7em 0 0.8em !important;
}

h3.goriblue::after{
    content: '';
    position: absolute !important;
    bottom: -4px !important;
    left: -5px !important;
    width: 164px !important;
    height: 4px !important;
    background-image: url(https://ikusugimoto.com/wp-content/uploads/2020/02/icon-heading-3.png);
    background-repeat: no-repeat !important;
    background-size: auto 4px !important;
}

@media only screen and (max-width: 767px){
	h3.gori, h3.goriblue{
		font-size: 1.3em !important;
	}
}


h4.blue{
    clear: both;
    line-height: 1.5;
    text-align: left;
    position: relative;
    padding: 7px 0 7px 18px;
    margin-top: 30px;
    margin-bottom: 15px;
	 font-size: 1.2em !important;
}
	
h4.blue:before{	
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #5EC4DC;
}

h4.blue:after{
    content: "";
    position: absolute;
    top: 0;
    left: 4px;
    width: 4px;
    height: 100%;
    background-color: #19ABCD;
}


@media only screen and (max-width: 767px){
	h4.blue{
		font-size: 1em !important;
	}
}
	
h4.border-bottom{
	border-bottom: solid 1px #000;
}

/*-------------------
Huawei Mate 20 Proスペック表
--------------------*/
.mate20pro-dl {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.mate20pro * {
    font-family: 'Noto Sans Japanese';
}

.mate20pro-dl dt {
    font-weight: 600;
    padding: 16px 16px 8px 0;
    color: #4D4D4D;
}
.mate20pro-dl dt, .mate20pro-dl dd {
    text-align: left;
    font-size: 16px;
}
.mate20pro * {
    font-family: 'Noto Sans Japanese';
}
.mate20pro-dl dd {
    color: #686868;
    padding: 8px 0 16px 0;
    border-bottom: 1px solid #D1D1D1;
}

/*_______________
 * リストデザイン
________________*/

/*マジックステッキ枠+区切りリスト*/
ul.magic {
  border: solid 2px #9E433B !important;
  padding: 0 0.5em !important;
  position: relative !important;
  list-style: none !important;
	font-weight: bold;
}

ul.magic li {
  line-height: 1.5 !important;
  padding: 0.5em 0 0.5em 2.0em !important;
  border-bottom: dashed 1px silver !important;
  list-style: none !important;
}

ul.magic li:before {
  font-family: FontAwesome !important;
  content: '\f0d0' !important;/*アイコン種類*/
  position: absolute !important;
  left : 0.5em !important; /*左端からのアイコンまで*/
  color: #9E433B !important; /*アイコン色*/
  list-style: none !important;
   width:0;
   height:0;
}

ul.magic li:last-of-type{
  border-bottom: none !important;
  list-style: none !important;
}

/*グレー矢印+区切りリスト*/
ul.gray-arrow01 {
  padding: 0 0.5em 1em !important;
  position: relative !important;
  list-style: none !important;
	font-weight: bold;
}

ul.gray-arrow01 li {
  line-height: 1.5 !important;
  padding: 0.5em 0 0.5em 2.0em !important;
  border-bottom: dashed 1px #6E6E6E !important;
  list-style: none !important;
}

ul.gray-arrow01 li:before {
  font-family: FontAwesome !important;
  content: '\f138' !important;/*アイコン種類*/
  position: absolute !important;
  left : 0.5em !important; /*左端からのアイコンまで*/
  color: #6E6E6E !important; /*アイコン色*/
  list-style: none !important;
   width:0;
   height:0;
}

/*グレーfire+区切りリスト*/

ul.gray-fire {
  padding: 0 0.5em 1em !important;
  position: relative !important;
  list-style: none !important;
	font-weight: bold;
}

ul.gray-fire li {
  line-height: 1.5 !important;
  padding: 0.5em 0 0.5em 1.0em !important;
  list-style: none !important;
  border-left : solid 35px #5c9ee7;/*先の色＝アイコン裏の色*/
  background: #f1f8ff;/*バーの色*/


}

ul.gray-fire li:before {
  font-family: FontAwesome !important;
  content: '\f06d' !important;/*アイコン種類*/
  position: absolute !important;
  left : -1.4em !important; /*左端からのアイコンまで*/
  color: #FFFFFF !important; /*アイコン色*/
  list-style: none !important;
   width:0;
   height:0;
}


/*ブルーolリスト*/
ol.blue {
    counter-reset: number;
    list-style-type: none;
    padding: .5em .2em .5em .8em;
    background: #eff8fb;
    border: solid 2px #54B2D0;
}

ol.blue li{
    position: relative;
    padding-left: 30px;
    margin-top: 0;
    line-height: 1.5;
    padding: 1em .5em 0em 35px;
}

ol.blue li:before{
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #00c1ff !important;
    color: #fff;
    font-family: "Arial",sans-serif;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    top: 30px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

@media only screen and (max-width: 767px){
ol.blue li:before{
	top: 30px !important;
	}
}
/*————————————————————-
テーブルデザイン1（三角矢印）
————————————————————-*/
table.arrow{
  width: 100%;
  border-collapse: collapse;
}

table.arrow tr{
  border-bottom: solid 2px white;
}

table.arrow tr:last-child{
  border-bottom: none;
}

table.arrow th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #666666;
  color: white;
  text-align: center;
  padding: 10px 0;
}

table.arrow th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #666666;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table.arrow td{
  text-align: left;
  width: 70%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}

/*————————————————————-
ページ個別編集
————————————————————-*/
/*テーブル横幅合わせる（GITZO記事）*/

#post-799 table, #post-1691 table {
	font-size: 0.7em;
	  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
}

/*————————————————————-
人気記事編集
————————————————————-*/
ul.wpp-list li a:before {
	background: #EA9F33 !important;
	}