@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 835px) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
    .header-container-in.hlt-top-menu {
        display: block;
    }
	#header-in {
		display: flex;
		flex-direction: row;
	}
	.logo {
		padding-top: 10px !important;
	}
	.add-header-contents {
		padding-top: 10px;
		padding-left: 16px;
        width: 100%;
	}
	.add-header-contents p {
		color: #545454;
		font-size: 21px;
		line-height: 1.4;
	}
    .pc_header_row {
        width: 375px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pc_header_row_wrap {
        display: flex;
        justify-content: space-between;
    }
    .pc_header_row ul {
        padding-left: 0;
        display: flex;
        justify-content: space-between;
    }
    .pc_header_row li {
        list-style: none;
        background-color: #cae5ee;
        width: 25%;
        border-right: solid #fff;
        box-sizing: border-box;
        padding: 3px 6px;
        display: flex;
    }
    .pc_header_row li:nth-child(2) {
        width: 32%;
    }
    .pc_header_row li:last-child {
        border-right: none;
        width: 43%;
    }
    .pc_header_row li img {
        width: 17px;
    }
    .pc_header_row li a {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        font-size: 12px;
        color: #545454;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 0.5px;
    }
    .pc_header_row li a span {
        font-size: 10px;
        display: block;
        margin-bottom: -5px;
    }
    .menu-icon span {
        color: slategrey;
    }
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
	/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
	/*必要ならばここにコードを書く*/
	/* #header-in {
		display: flex;
		flex-direction: row;
	}
	.logo {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.add-header-contents {
		padding-top: 10px;
		padding-left: 16px;
	}
	.add-header-contents p {
		color: #545454;
		font-size: 16px;
		line-height: 1.4;
	}
	.header-container-in.hlt-top-menu .logo-header img {
		max-height: 40px;
	} */
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .logo {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }
    #content {
        padding-top: 122px;
        margin-top: 0;
    }
    #header-container {
        background-color: #fff;
        position: fixed;
        width: 100%;
        z-index: 1;
    }
    .sp_header_row01 {
        display: flex;
        justify-content: space-between;
        padding: 10px 0 4px;
    }
    .sp_logo {
        width: 65%;
        max-width: 300px;
    }
    .sp_icon_wrap {
    }
    .sp_icon_wrap .icon {
        vertical-align:top;
    }
    .icon {
        max-width: 40px;
    }
    .sp_header_row02 ul {
        padding-left: 0;
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px;
    }
    .sp_header_row02 li {
        list-style: none;
        background-color: #cae5ee;
        width: 25%;
        border-right: solid #fff;
        box-sizing: border-box;
        padding: 3px 6px;
        display: flex;
    }
    .sp_header_row02 li:nth-child(2) {
        width: 32%;
    }
    .sp_header_row02 li:last-child {
        border-right: none;
        width: 43%;
    }
    .sp_header_row02 li img {
        width: 17px;
    }
    .sp_header_row02 li a {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        font-size: 12px;
        color: #545454;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 0.5px;
    }
    .sp_header_row02 li a span {
        font-size: 10px;
        display: block;
        margin-bottom: -5px;
    }
    .menu-icon span {
        color: slategrey;
    }

}

/*480px以下*/
@media screen and (max-width: 480px) {
	/*必要ならばここにコードを書く*/
}