@charset "UTF-8";

/*フォント変更*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');


body{
	font-family: 'Noto Sans JP', sans-serif;
}/*




/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

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

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




/*引用*/
blockquote {
    position: relative;
    padding: 5px 12px 5px 56px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    background: #fff0f0;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 36px;
    height: 36px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 20px;
    line-height: 36px;
    background: #ff9d9d;
    border-radius: 50%;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}









/*マーカー太*/
.marker1-red {
 background-color: #FADBDA;
}
.marker1-orange {
 background-color: #ffce9e;
}
.marker1-yellow {
 background-color: #ffffa3;
}
.marker1-green {
 background-color: #D5EAD8;
}
.marker1-blue {
 background-color: #D3EDFB;
}
.marker1-purple {
 background-color: #d8b2ff;
}
.marker1-pink {
 background-color: #FFE2EF;
}




/*マーカー太1a*/
.marker1a-red {
 background-color: #ff6b6b;
}
.marker1a-orange {
 background-color: #ffa042;
}
.marker1a-yellow {
 background-color: #ffff6b;
}
.marker1a-green {
 background-color: #b5ff6b;
}
.marker1a-blue {
 background-color: #6bffff;
}
.marker1a-purple {
 background-color: #b56bff;
}
.marker1a-pink {
 background-color: #ff6bb5;
}





/*マーカー細*/
.marker2-red {
 background: linear-gradient(#fff 60%, #FADBDA 0%);
}
.marker2-orange {
 background: linear-gradient(#fff 60%, #ffce9e 0%);
}
.marker2-yellow {
 background: linear-gradient(#fff 60%, #ffffa3 0%);
}
.marker2-green {
 background: linear-gradient(#fff 60%, #D5EAD8 0%);
}
.marker2-blue {
 background: linear-gradient(#fff 60%, #D3EDFB 0%);
}
.marker2-purple {
 background: linear-gradient(#fff 60%, #d8b2ff 0%);
}
.marker2-pink {
 background: linear-gradient(#fff 60%, #FFE2EF 0%);
}



/*マーカー細2a*/
.marker2a-red {
 background: linear-gradient(#fff 60%, #ff6b6b 0%);
}
.marker2a-orange {
 background: linear-gradient(#fff 60%, #ffa042 0%);
}
.marker2a-yellow {
 background: linear-gradient(#fff 60%, #ffff6b 0%);
}
.marker2a-green {
 background: linear-gradient(#fff 60%, #b5ff6b 0%);
}
.marker2a-blue {
 background: linear-gradient(#fff 60%, #6bffff 0%);
}
.marker2a-purple {
 background: linear-gradient(#fff 60%, #b56bff 0%);
}
.marker2a-pink {
 background: linear-gradient(#fff 60%, #ff6bb5 0%);
}










/*見出し*/
.mybox{
 background-color: #f8f8ff;  /* 背景色 */
 border-radius: 5px;
 padding: 20px;  /* 内側の余白 */
 position: relative;
 z-index: 0;
}
.mybox:before{
 border: 1px solid #fff; /* 白い実線 */
 border-radius: 5px;
 content: '';
 display: block;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 margin: 4px;
 z-index: -1;
}




/*画像に影*/
.shadow_img {
    box-shadow: 5px 5px 20px -9px rgba(0, 0, 0, 0.5);
}




/*囲みステマ*/
.mybox{
 background-color: #F6D4D8;  /* 背景色 */
 border-radius: 5px;
 margin: 20px 5px; /* 外側の余白 上下・左右 */
 padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
 position: relative;
 z-index: 0;
}
.mybox:before{
 border: 1px solid #fff; /* 白い実線 */
 border-radius: 5px;
 content: '';
 display: block;
 margin: 4px;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 z-index: -1;
}
.mybox:after{
 background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
 background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
 background-position: 0 0, 8px 8px;  /* 水玉の距離 */
 background-size: 15px 15px; /* 水玉の大きさ */
 border-left: 2px dotted rgba(0,0,0,0.1);
 border-right: 2px dotted rgba(0,0,0,0.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2);
 content: 'point';
 display: block;
 padding: 5px 20px;  
 text-align: center;
 position: absolute;
 top: -10px;
 left: 20px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}







/*めくれたテープ風*/
.mybox2{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.mybox2:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.mybox2 p {
    margin: 0; 
    padding: 0;
}





/*見出しh2*/
.article h2{
 background-color: #f5d5da; /* 背景色 */
 border-radius: 5px;
 color: #ef858c; /* 文字色 */
 padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
 position: relative;
 text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
h2:before{
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 margin-right: 10px;
 position: absolute;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
h2:after{
 border-bottom: 2px dotted #fff; /* 下線 */
 content: '';
 position: absolute;
 bottom: 3px;
 left: 3px;
 right: 3px;
}



/*見出しh3*/
.article h3{
 color: #d04255; /* 文字色 */
 padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
 position: relative;
}
.article h3:before{
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 position: absolute;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.article h3:after{
 border-bottom: 2px dotted #EAA8BF; /* 下線 */
 content: '';
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 100%;
}





/*point*/
.mybox3{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.mybox3 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.mybox3 p {
    margin: 0; 
    padding: 0;
}






/*グローバルナビマテリアル風*/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #FDD835;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
    transition: all .2s ease;
}




/* モバイルメニューを横並びスクロール */
@media screen and (max-width: 480px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}