@charset "UTF-8";
/*
Theme Name: itohenlab
Author: kdf
Description: itohenlab
Version:1.6
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* ***************************************************************** 
*	基本設定
* ***************************************************************** */

body {
font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 16px;
background: #ffffff;
color: #444444;
line-height: 1.7em;
word-wrap:break-word;
overflow-wrap:break-word;
}

body,html{padding: 0 ;margin: 0!important}

*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}



/* *****************************************************************
*	外枠
* ***************************************************************** */

.container-inner{
max-width: 1020px;
padding: 0 30px;
margin: 0 auto;
}


@media only screen and (max-width:768px){
.container-inner{padding: 0 20px;}
main{margin-top: 30px;}
}

@media only screen and (max-width:480px){
main{margin-top: 32px;}
}


/* テキスト
---------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
dl, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
}


h1,h2,h3,h4,h5,h6{margin:0 0 10px;line-height: 1.5em;}



/* リンク
---------------------------------------------------- */

a{
color:#45AAB8;
text-decoration:none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

a:hover{
color:#666666;
}

a:active, a:focus {
outline: 0;
}


button, input, label, select, textarea{
font-family: inherit;
font-size: 15px;
}


/* 画像
---------------------------------------------------- */

img{
max-width: 100%;
height: auto;
border:0;
padding:0px;
margin:0px
}

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding:4px;
margin: 0 0 10px 20px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 20px 10px 0;
display: inline;
}

/* フロート
---------------------------------------------------- */

.alignright, .right { 
float: right; 
margin: 0 0 10px 20px;
}

.alignleft, .left { 
float: left; 
margin: 0 20px 10px 0;
}

.clear { 
clear:both; 
}

.aligncenter { display: block; margin: 0 auto; }


/* 共通
---------------------------------------------------- */

ul{padding: 0;margin: 0}
ul li{list-style:none}
p{margin:0 0 1em;}
.bold{font-weight:bold}


.d-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}

.d-flex-around{justify-content: space-around;}
.d-flex-start{justify-content: flex-start;}
.d-flex-end{justify-content: flex-end;}
.d-flex-center{justify-content: center;}
.align-center{align-items: center;}
.flex-reverse{flex-wrap: wrap-reverse;}
.text-center{text-align: center;}
.text-right{text-align: right;}




/* ***************************************************************** 
*	header
* ***************************************************************** */

header {
padding: 20px 0 0;
}

#header-logo {
text-align:center;
margin: 0 auto 40px;
width: 25%;	
}

.logo {
text-align:center;
margin: 0 auto;
width: 25%;	
padding:0px 0px 0px 0px;
}


header nav,
ul.grand-menu{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0;
}

.header nav{
justify-content: center;
}

.nav-wrapper ul.grand-menu li{
font-size: 14px;
text-align: center;
margin: 0;
position: relative;
}

ul.grand-menu li a{
color: #444444;
display: block;
text-decoration: none;
padding: 12px 30px 12px 30px;
position: relative;
}


ul.grand-menu li .sub-menu{
position: absolute;
visibility: hidden;
transition: all .4s ease;
left: 0;
width: 230px;
border: 1px solid #444444;
border-radius: 5px;
opacity: 0;
}

ul.grand-menu li:hover .sub-menu,
ul.grand-menu li .sub-menu li:hover .sub-menu{
display: block;
visibility: visible;
transition: all .4s ease;
opacity: 1;
}

ul.grand-menu .sub-menu li{
font-size: 12px;
margin-left: 0;
border-bottom: 1px dotted #444444;
}

ul.grand-menu .sub-menu li:last-child{border: none;}

.sub-menu li a{
padding: 0.8em!important;
}

ul.grand-menu li .sub-menu li a:hover::before{
transform-origin: 0;
transform: scale(0);
}


.ham,.black-bg{display: none;}

@media only screen and (max-width:1200px){
ul.grand-menu li{
font-size: 13px;
}
}

@media only screen and (max-width:1000px){
ul.grand-menu li{font-size: 12px;}
}

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

header .container-inner{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}

#header-logo{width: 150px;margin: 0;}

.ham {
position: relative;
width: 32px;
height: 32px;
cursor: pointer;
display: inherit;
z-index: 1000;
}

.ham_l {
position: absolute;
width: 32px;
height: 2px;
left: 0;
background-color: #444444;
transition: all .4s;
}

.ham_l-1 {top: 1px;}
.ham_l-2 {top: 10px;}
.ham_l-3 {top: 20px;}

.open .ham_l-1 {transform: rotate(-45deg);top: 11px;}
.open .ham_l-2 {opacity: 0;}
.open .ham_l-3 {transform: rotate(45deg);top: 11px;}

#nav-wrapper{width: auto;}

.header-nav {
position: fixed;
right: 0;
top: -100%;
width: 100%;
height: auto;
background-color: #ffffff;
transition: all .4s;
z-index: 220;
overflow-y: auto;
}

.open .header-nav {top: 0;}

.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 5;
background-color: #444444;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
display: inherit;
cursor: pointer;
z-index: 100;
}

.open .black-bg {opacity: 0.6;visibility: visible;}

.nav-wrapper ul.grand-menu{
display: block;
border-right: none;
}

.nav-wrapper ul.grand-menu li{
width: 100%;
border-bottom: 1px solid #cccccc;
}

.nav-wrapper ul.grand-menu li a{
padding: 20px 10px;
}

.nav-wrapper ul.grand-menu li a::before{
content: none;
}

.open .nav-wrapper ul.grand-menu {display: block;transition: .4s;}

.nav-wrapper ul.grand-menu li .sub-menu{
position: static;
display: none;
transition: all .4s ease;
left: 0;
width: auto;
opacity: 0;
}

.nav-wrapper ul.grand-menu li:hover .sub-menu,
.nav-wrapper ul.grand-menu li .sub-menu li:hover .sub-menu{
display: block;
visibility: visible;
transition: all .4s ease;
opacity: 1;
}

.nav-wrapper ul.grand-menu li .sub-menu li a{
padding: 10px 10px 10px 40px!important;
}

.nav-wrapper ul.grand-menu li .sub-menu li a:hover{
background-color: #ffffff;
transition: .5s;
}
}

@media only screen and (max-width:520px){
#header-logo{width: 120px;}
}


/* ***************************************************************** 
*	footer
* ***************************************************************** */
footer{
color: #666666;
border-top: 1px solid #444444;
margin-top: 70px;
padding:30px 0 20px;
}

footer .d-flex{align-items: center;}

footer ul li {
font-size: 0.75em;
line-height: 1;
margin-right: 20px;
}

footer ul li a{
color: #666666;
}

footer p{
font-size: 0.875em;
margin-bottom: 0;
}

@media only screen and (max-width: 1000px){
footer p{text-align: center;}
}


/* floatボタン */
.float-Btn {
position: fixed;
bottom: 20px;
right: 20px;
opacity: 1;
cursor: pointer;
z-index: 1001;
width: 65px;
}

.float-Btn a{
color: #666666;
font-size: 28px;
background: #dedede;
padding: 8px 15px 12px 15px;
border-radius: 2px;
}


@media (max-width: 768px) {
#top-float-Btn {
right:20px;
bottom: 20px
}
}


/* ***************************************************************** 
*	page・shingle・archive
* ***************************************************************** */

.main-slider{margin-bottom: 50px;}


/* タイトル
---------------------------------------------------- */
.main-tit{
font-size: 1.5em;
margin: 30px 0 20px;
}

.blog-tit{
font-size: 1.5em;
line-height: 1.5em;
font-weight: bold;
color: #444444;
margin: 20px 0px 20px 0px;
padding: 18px 0px 15px 0px;
border-top: 3px double #cccccc;
border-bottom: 1px solid #cccccc;
}

.category-tit{
font-size: 1em;
}

.category-tit a{
color: #444444;
margin-left: 5px;
text-decoration:none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

.category-tit a:hover {
color:#666666;
}


@media only screen and (max-width: 600px){
.main-tit{font-size: 20px;font-size: 1.2em;}
}


/* 記事ポスト
---------------------------------------------------- */
.archive-post{width: 31.2%;margin:0 3.2% 50px 0;}
.archive-post:nth-child(3n){margin-right: 0;}
.archive-post p{line-height: 1.5em;margin: 0;}

@media only screen and (max-width:768px){
.archive-post{width: 48%;margin:0 4% 50px 0;}
.archive-post:nth-child(3n){margin:0 4% 50px 0;}
.archive-post:nth-child(2n){margin-right: 0;}
}


@media only screen and (max-width:400px){
.archive-post{width: 100%;margin:0 0 50px 0;}
.archive-post:nth-child(3n){margin:0 0 50px 0;}
}

.post-thumbnail{margin-bottom: 10px;line-height: 0;}


.post-date{
font-size: 0.75em;
color: #cccccc;
padding: 0 0 0 0;
margin: 0 0 10px 0;
}

.archive-post h3{
font-size: 16px;
color: #444444;
font-weight: 300;
margin-bottom: 5px;
}

.archive-post p{
font-size: 13px;
color: #444444;
}

.post-item-category{
margin-bottom: 20px;
}


/* パンくず
---------------------------------------------------- */
ul.breadcrumb{
font-size: 0.75em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

ul.breadcrumb li{margin: 0;}

ul.breadcrumb li:not(:first-child){
color: #444444;
padding-left: 5px;
}

ul.breadcrumb li:not(:first-child):before{
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 5px;
margin-bottom: 1px;
border-top: 1px solid #444444;
border-right: 1px solid #444444;
transform: rotate(45deg);
}

.pagination {text-align: center;}


/* ページナビ
---------------------------------------------------- */
.nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}

.pagination .page-numbers {
padding: 13px 8px;
margin-right: 10px;
background: #efefef;
border: 1px solid #dddddd;
line-height: 0;
}


.pagination a:hover{
transition: .3s;
opacity: 1;
color: #444444;
}

.pagination .current {
background: #cccccc;
border: 1px solid #dddddd;
color: #ffffff;
}

.pagination .dots {background: transparent;}


/* 前後の記事 */
.page-article{margin-top: 80px;}

.page-article li img{
width: 100px;
height: 100px;
object-fit: cover;
}

.page-article li p{
margin: 0 20px;
}

.previous-article,
.next-article{
width: 40%;
font-size: 13px;
}

@media only screen and (max-width: 920px){
.previous-article,
.next-article{width: 100%;padding: 10px;}
}

.previous-article a,
.next-article a{
display: flex;
align-items: center;
}

.previous-article a:before,
.next-article a:after{
content: "";
display: inline-block;
padding-left: 20px;
height: 20px;
margin: 0 10px;
transform: rotate(45deg);
}

.previous-article a:before{
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.next-article  a{
justify-content: flex-end;
}

.next-article a:after{
border-right: 1px solid #cccccc;
border-top: 1px solid #cccccc;

}



/* 記事の詳細
---------------------------------------------------- */

/* 2カラム-side */
.col--l .group{margin-top: 50px;}
.col--l .content{width: 65%;}
.col--l .col3{margin-right: 5%;}
.col--l .col3:nth-of-type(3n){margin-right: 0;}
.sidebar{width: 31%;}

@media only screen and (max-width: 768px){
.col--l .content{width: 100%;}
.col--l .sidebar{display: none;}
}

@media only screen and (max-width: 600px){
.col--l .col3{margin-right: 4%;}
.col--l .col3:nth-of-type(3n){margin-right: 4%;}
.col--l .col3:nth-of-type(2n){margin-right: 0;}
}


/* 記事内の見出し */
.post-content h1 {
font-size: 1.5em;
margin: 40px 0px 20px 0px;
}

.post-content h2 {
font-size: 1.375em;
line-height: 130%;
font-weight: bold;
color: #444444;
margin: 40px 0px 20px 0px;
padding: 18px 0px 15px 0px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.post-content h3 {
font-size: 1.25em;
line-height: 130%;
font-weight: bold;
color: #444444;
padding: 0 0 5px 0;
margin: 40px 0 15px 0;
border-bottom:1px solid #cccccc;
}

.post-content h4 {
font-size: 1.125em;
line-height: 130%;
font-weight: bold;
color: #555555;
padding: 0 0 5px 0;
margin: 30px 0 10px 0;
border-bottom:1px dotted #cccccc;
}

.post-content h5 {
font-size: 1em;
line-height: 1.3em;
margin: 30px 0 0px 0;
}

.post-content h6 {
font-size: 0.875em;
line-height: 1.3em;
margin: 30px 0 0px 0;
}


/* 記事内のリスト*/
.post-content ol{
margin: 7px 0 7px 10px;
padding: 0 0 0 0;
list-style: decimal;
}

.post-content ul{
margin: 7px 0 7px 4px;
padding: 0 0 0 0;
list-style: disc;
}

.post-content ul li{
margin: 2px 0 2px 15px;
padding: 0;
}

.post-content ul a{
color:#45AAB8;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

.post-content ul a:hover{
color:#666666;
}


/* タグ*/
.post-item-category a:first-child{margin: 0;}

.post-item-tags li{
letter-spacing: 0.1em;
margin-right: 5px;
}

.post-item-tags ul:before{
content: "タグ：";
}

.post-item-tags li:after{content: ",";}
.post-item-tags li:last-child:after{
content: "";
}

.post-item-tags li a:hover{
transition: .3s;
opacity: .7;
}

.post-item-tags{
margin-top: 50px;
font-size: 12px;
}


/* サイドバー */
.sidebar .side-area{margin-bottom: 50px;}

.sidebar a{color: #444444;}

.sidebar h3{
font-size: 1em;
line-height: 1.1em;
border-bottom: 1px solid #444444;
padding-bottom: 10px;
margin-bottom: 10px;
}

.sidebar ul li{
font-size: 15px;
list-style: none;
border-bottom:1px dotted #dddddd;
margin: 0 0 0 0;
}

.sidebar ul li a{
display: block;
padding: 10px 0;
}

.sidebar .side-active select{
color: #444444;
border: 1px solid #444444;
width: 100%;
padding: 5px
}



/* 新着記事・関連記事
---------------------------------------------------- */

.related{margin-top: 50px;}

.related-tit{
font-size: 1.125em;
border-bottom: 1px solid #444444;
}

.post-area article{
border-bottom: dotted 1px #cccccc;
}

.post-area article a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}

.post-area .post-thumbnail{
width: 25%;
overflow: hidden;
margin-bottom: 0;
}

.post-area .post-thumbnail img{
width: 100%;
height: 100%;
object-fit: cover; 
}

.post-area article h4{
font-size: 0.875em;
font-weight: 300;
margin: 0;
width: 72%;
}

@media only screen and (max-width: 520px){
.post-area .post-thumbnail{
width: 30%;
height: 80px;
}
.post-area article h4{font-size: 0.875em;width: 66%;}
}




/* ***************************************************************** 
*	前のテーマからコピーした要素（不要なら削除）
* ***************************************************************** */	


/* ギャラリーレイアウト
---------------------------------------------------- */

li.item {
height: 440px;
margin-bottom: 50px;
}

li.item-gallery {
height: 200px;
}

.item-img {
margin: 0 0 10px 0;
height: 200px;
overflow: hidden;
text-align:center;
}

.item-cat {
font-size: 65%;
color: #999;
padding: 0 0 0px 0;
margin: 0 0 20px 0;
max-height: 65px;
overflow:hidden;
}

.item-cat a {
color: #444444;
}

.item-date {
font-size: 70%;
color: #ccc;
padding: 0 0 0 0;
margin: 0 0 10px 0;
max-height: 50px;
overflow:hidden;
line-height: 150%;
}

.item h2 {
font-size: 17px;
line-height: 150%;
font-weight: normal;
letter-spacing: 0.03em;
}

.item-title {
margin: 0 0 0 0;
padding: 5px 0px 0px 0px;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}

.item-title a {
color: #444444;
}

.item-title a:hover {
color: #999;
}

.item-text {
font-size: 13px;
color: #444444;
line-height: 170%;
}



/* WP必須
---------------------------------------------------- */

.wp-caption {
max-width:100%;
}

.wp-caption-text {
font-size:90%;
text-align: center;
}

/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}

.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}


/* カレンダー
---------------------------------------------------- */

table#wp-calendar {
width: 100%
}

table#wp-calendar th {
text-align: center;
}

table#wp-calendar td {
text-align: center;
}


/* テーブル
---------------------------------------------------- */

.single-contents tabel,
.page-contents tabel {
width: 100%;
}
 
.single-contents th,
.single-contents td,
.page-contents th,
.page-contents td {
border: 1px solid #ccc;
padding: 20px;
}
 
.single-contents th,
.page-contents th {
font-weight: bold;
background-color: #dedede; 
}

/* *****************************************************************
*	検索フォーム＆検索結果
* ***************************************************************** */

/* 検索フォーム
---------------------------------------------------- */

.search input {
font: 11px arial, sans-serif; 
color: #c0c0c0; 
width:85%;
padding: 10px 5px; 
}

.search button {
width: 15px; 
height: 15px; 
cursor: pointer; 
vertical-align: middle;
border: none; 
background: url(images/search.png) no-repeat; 
}


/* 検索結果ハイライト
---------------------------------------------------- */

.search-excerpt {
font-weight: bold;
background: #FFE4E1; 
}



/* *****************************************************************
*	ボタン
* ***************************************************************** */

.btn a {
font-size: 11px;
letter-spacing: 0.1em;
color: #fff;
background: #bbb;
text-align: center;
margin: 20px 0 20px 0;
padding: 10px 10px;
}

.btn a:hover {
color: #fff;
background: #ddd;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}



/* *****************************************************************
*	レスポンシブテーブル
* ***************************************************************** */

.responsive-tabel-01 table { 
width: 100%; 
}

.responsive-tabel-01 {
margin: 20px 0;
}

.responsive-tabel-01 th { 
width: 30%; 
font-size: 20px;
text-align: left;
background: #f4f4f4;
padding: 20px; 
border: 1px solid #ddd;
vertical-align: middle;
}

.responsive-tabel-01 td { 
font-size: 20px;
text-align: left;
padding: 20px; 
border: 1px solid #ddd;
vertical-align: middle;
}


@media only screen and (max-width:480px){
.responsive-tabel-01 { margin: 20px -10px; }
.responsive-tabel-01 th,
.responsive-tabel-01 td { width: 100%; display: block; border-top: none; }
.responsive-tabel-01 tr:first-child th   { border-top: 1px solid #ddd; }
}



/* *****************************************************************
*   レスポンシブ（外部サービス対策用）
* ***************************************************************** */

/* Twitter Timeline
---------------------------------------------------- */

.twitter-timeline { 
width:100%; 
height: 300px; 
}


/* Facebook Like Box
---------------------------------------------------- */

div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 100% !important;
}


/* YouTube embed
---------------------------------------------------- */

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/*
* Spin
*/
.hamburger--spin .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*--------------sweater-----------------------*/
.back_B {
	background-image: url("images/sweater/back.jpg");
	padding: 40px 20px;
}
#sweater .midashi {
	color: #727171;
	font-size: 100%;
	font-weight: bold;
	text-align-last: center;
	line-height: 1.9em;
}
#sweater h3 {
	width: 285px;
	margin: 0 auto 10px;
}
#sweater .col4 p {
	line-height: 1.5em;
	margin-top: 10px;
}
.point {
  display: flex;
  align-items: center;
  justify-content: center;
}
.point img {width: 87px; height: 26px;}
.point:before,
.point:after {
  border-top: 1px solid #514f4e;
  content: "";
  width: 100px; 
}
.point_line {
	border-bottom: 1px solid #514f4e;
	width: 287px;
	text-align: center;
	margin: 0 auto 20px;
}
#sweater h4 {
	border-bottom: 1px solid #514f4e;
	border-top: 1px solid #514f4e;
	text-align: center;
	padding: 15px 0;
	margin: 0;
	color: #727171;
}

@media only screen and (min-width: 481px) {
.width55 {
	display: block;
	max-width: 56%;
	margin: auto;
 }
.width40 {
	display: block;
	max-width: 40%;
	margin: auto;
 }
}
.titleB {
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.titleB::before { content:url(images/sweater/slash03L.svg);
  display:inline-block;
  width:30px;
  height:20px;
  margin-right:10px;
  position:relative;
  top:3px;
  left:0;
}
.titleB::after {
  content:url(images/sweater/slash03R.svg);
  display:inline-block;
  width:30px;
  height:20px;
  margin-left:10px;
  position:relative;
  top:3px;
  right:0;
}
h5.underlineT {
	border-bottom: 1px solid #727171;
	text-align: center;
	padding-bottom: 7px;
	margin: 0;
	color: #727171;
	width: 100%;
}

/*------------------------book12----------------------------------*/
.freepage p {
	color: #727171;
	line-height: 1.9em;
	padding: 0 0 10px!important;
	margin: 0;
}
#book12 h3 {
	width: 285px;
	margin: 0 auto 10px;
}
.img_sukima {vertical-align:top;}
.back_G {
	background-color: #ebecd5;
	padding: 40px 20px;
}
.col_center img {
	display: block;
     margin: 0 auto 20px;
}
.freepage .col3 p {
	text-align: center; 
	line-height: 1.5em;
	margin-top: 0;
	padding: 5px 0 0;
	
}
.freepage img{
vertical-align:top;
}
/*---writer_col-------*/
.writer_col {border-top: 1px solid #333333; padding-top: 30px; margin-top: 30px;}
.writer_col .avatar{width: 20%; padding-right: 4%;}
.writer_col .letter{width: 76%;}
@media only screen and (max-width: 480px) {	
.writer_col .letter{width: 100%; padding-right: 0;}
.writer_col .avatar{width: 30%;}
}

/*------------------チャート------------------*/
.chart {margin-bottom:100px;}
.chart_colA{
margin: auto;	
max-width: 600px;
}
.chart h1{
display: inline-block;
border-bottom: 10px solid #fcd475;
padding-bottom: 7px;
font-weight: normal;
}
.y_line {
border: 2px solid #fcd475;
padding: 15px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center;
font-size: 1.2em;	
}
li.y_line {
list-style-type: none; 
margin-left: 0;	
}
.y_line a {
color: #444444;
display: block;	
}
.col2 .y_line {margin-bottom: 0;}
.solid_bt {
width: 100px;
background-color: #fcd475;
display: inline-block;
border-radius: 50px;
text-align: center;
}
.blue {color: #00478b;}
@media only screen and (max-width: 480px) {
.page-contents .chart .col3 {width: 100%}
}


/*-------------------------------------------*/
.flexcol{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
.flexcolB{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.flexcol-around{justify-content: space-around;}
.flexcol-start{justify-content: flex-start;}
.flexcol-end{justify-content: flex-end;}
.flexcol-center{justify-content: center;}

.col2,.col2B{width: 48.8%; margin-bottom: 30px;}
.col3{width: 29.4%;margin-right: 5%; margin-bottom: 15px;}
.col4{width: 22%;margin-right: 4%; margin-bottom: 15px;}
.col3:nth-of-type(3n),.col4:nth-of-type(4n){margin-right: 0;}

@media only screen and (max-width: 480px) {
	.col2{width: 100%;}
	.col3,.col4{width: 48%; margin-right: 4%;}
    .col3:nth-of-type(3n),.col4:nth-of-type(4n){margin-right: 4%}
    .col3:nth-of-type(2n),.col4:nth-of-type(2n){margin-right: 0;}
}


/*--------------------------------
insta読み込み
--------------------------*/
#insta ul{
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
justify-content: space-between;	
width:100%;
margin: 0;	
}
#insta li{	
list-style: none;
box-sizing: border-box;
width: 31%;
padding:0;	
margin: 0 0 20px 0;
height: auto;
position: relative;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#insta ul li{width: 45%;}	
}
@media screen and (max-width: 480px) {
#insta ul li{width: 45%;}
}