/*
Theme Name: ONLINE SERVICE Themes
Theme URI: https://online-service.co.jp
Description: 株式会社オンラインサービス開発テーマ
Author: T.Yamazaki
Author URI: https://online-service.co.jp
Version: 1.0.0
License: GNU General Public License
*/

/* ------------------------------
Base color
------------------------------ */
#footer			{
background: -moz-linear-gradient(top, #ffcccc, #fd8585);
  background: -webkit-linear-gradient(top, #ffcccc, #fd8585);
  background: linear-gradient(to bottom, #ffcccc, #fd8585);


}

.pagination_wrap a,
.pagination_wrap .dots	{border:solid 1px; background:#666a79; border-color:#878a96 #5c5f6d #5c5f6d #878a96;}

/* ------------------------------
Base design
------------------------------ */
*			{border:0px; margin:0px; padding:0px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html			{margin-bottom:1px;height:100%; color:#555;}
body			{display:block; text-align:center; margin:0px; border:0px; padding:0px; background:#000; height:100%; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}

#snsbutton		{list-style: none;}
#header .main_wrap	{position:relative; width:100%;}
#header .sub_wrap	{position:relative; width:100%; height:300px;}

#navimenu		{width:100%; position:fixed; margin:0 auto; z-index:1000;}
#header_logo		{z-index:999; position:absolute; top:180px; left:50%; max-width:396px; width:90%; transform:translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}

#footer_logo		{z-index:999; max-width:396px; width:90%;}


#bottom_design		{height:200px; width:100%; margin:0 auto; background:#ffffff; background-image:url(../../../img/bottom.png); background-position:center center; background-repeat:repeat;}

#header .search_base	{width:300px; position:absolute; z-index:999; bottom:15px; right:15px; text-align:right;}
#header .search_left	{width:200px; margin-right:0px;}

#article .search_base	{width:90%; text-align:center; margin:0px auto;}
#article .search_left	{width:60%; margin-right:2%;}
#article .search_right	{width:20%;}

#container		{min-width:375px !important; width:100%; text-align:center; margin:0px auto !important; padding:0px auto !important; background:#fff;}
#header			{width:100%; background:#fff; height:auto; margin:0px auto !important; padding:0px auto !important;}

.fit_wrap		{margin:0px auto; width:100%;}   
.fit_right		{width:50%; margin-bottom:10px; float:right; text-align:left;}
.fit_left		{width:50%; margin-bottom:10px; float:left; text-align:left;}

@media screen and (max-width:660px) {
.fit_wrap 		{width:100%; margin:0px auto; max-width:405px;}   
.fit_right 		{width:100%; float:none; text-align:left;}
.fit_left 		{width:100%; float:none; text-align:left;}
}

.slider_img		{width:100%; height:300px; object-fit:cover; font-family: 'object-fit: cover;';  /*IE対策*/}

#article		{min-width:0;}

.menu-filter		{opacity:0.9; position:fixed; top:0; left:0; z-index:9999; width:100%;}
.login_edit		{position:absolute; z-index:999; top:70px; right:10px; text-align:right; width:100%; color:#fff;}
.login_button		{z-index:999; float:left; text-align:left; width:100%; color:#fff;}
.login_button a		{display:none;}
.login_button input[type="checkbox"]:checked + a{display:block;}

.login_top		{position:absolute; z-index:999; bottom:65px; right:15px; text-align:right; width:100%; color:#fff;}

#column0,
#column1,
#column2,
#column3		{width:96%; margin:10px auto !important;}

#footer			{color:#fff; width:100%; margin:0px auto; padding-top:20px; padding-bottom:20px; font-size:90%;}

#footer aside		{width:95%; padding-top:20px;}

ul .cat-item a:before	{color:#fff; content:"\f304"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:0.2em; text-decoration:none;}

.parents_footer		{flex-basis:auto; display:flex; display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; width:95%; max-width:1130px; margin:0 auto; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap;}
.parents_footer .child			{width:100%; text-align:left; display:block; margin-left:0px; margin-right:0px; margin-bottom:5px;}
.parents_footer .child			{width:calc(25% - 0px / 4);}
.parents_footer .child:nth-child(4n)	{margin-right:0px;}

.search_left		{width:65%;}

/*-----------------
▼▼▼ 全画面 ▼▼▼
-----------------*/
.about,
.emails,
.cloud1,
.cloud2,
.barun,
#bottom,
#section01,
#section02,
#section03,
#section04,
#section05,
#section06	{margin:0px; width:100%; overflow: hidden;}


#column0		{max-width:1200px; grid-template-areas:"article article article""nav nav nav""aside aside aside"; display:grid; grid-template-columns:100%; grid-template-rows:auto auto auto; display:-ms-grid; -ms-grid-columns:100%; -ms-grid-rows:auto auto auto;}

#column0 #article	{grid-area:article; -ms-grid-column:1; -ms-grid-row:1; margin-left:0em; margin-right:0em; }
#column0 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:2;}
#column0 #sideright	{grid-area:aside; -ms-grid-column:1; -ms-grid-row:3;}

#column0 #sideleft,
#column0 #sideright					{position:static; margin-bottom:0; top:0px; padding-bottom:0px; z-index:1;}
#column0 #side_parents .side_child			{width:calc(25% - 0px/ 4);}
#column0 #side_parents .side_child:nth-child(4n)	{margin-right:0px;}
/*-----------------
▼▼▼ 1カラム ▼▼▼
-----------------*/
#column1		{max-width:810px; grid-template-areas:"article article article""nav nav nav""aside aside aside"; display:grid; grid-template-columns:100%; grid-template-rows:auto auto auto; display:-ms-grid; -ms-grid-columns:100%; -ms-grid-rows:auto auto auto;}

#column1 #article	{grid-area:article; -ms-grid-column:1; -ms-grid-row:1; margin-left:0em; margin-right:0em; }
#column1 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:2;}
#column1 #sideright	{grid-area:aside; -ms-grid-column:1; -ms-grid-row:3;}

#column1 #sideleft,
#column1 #sideright					{position:static; margin-bottom:0; top:0px; padding-bottom:0px; z-index:1;}
#column1 #side_parents .side_child			{width:calc(25% - 0px/ 4);}
#column1 #side_parents .side_child:nth-child(4n)	{margin-right:0px;}

/*-----------------
▼▼▼ 2カラム ▼▼▼
-----------------*/
#column2		{max-width:1130px; grid-template-areas:"nav article"; display:grid; grid-template-columns:320px 1fr; grid-template-rows:auto auto; display:-ms-grid; -ms-grid-columns:320px 1fr; -ms-grid-rows:auto auto;}
#column2 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:1; margin-right:10px;}
#column2 #article	{grid-area:article; -ms-grid-column:2; -ms-grid-row:1;}

@media screen and (max-width:1080px) {
#column2		{grid-template-areas:"nav article"; display:grid; grid-template-columns:1.5fr 3.5fr; grid-template-rows:auto auto; display:-ms-grid; -ms-grid-columns:1.5fr 3.5fr; -ms-grid-rows:auto auto;}
#column2 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:1; margin-right:10px;}
#column2 #article	{grid-area:article; -ms-grid-column:1; -ms-grid-row:1; margin-right:10px;}
}

@media screen and (max-width:810px) {
#column2		{grid-template-areas:"article article""nav nav"; display:grid; grid-template-columns:100%; grid-template-rows:auto auto auto; display:-ms-grid; -ms-grid-columns:100%; -ms-grid-rows:auto auto auto;}
#column2 #article	{grid-area:article; -ms-grid-column:1; -ms-grid-row:1; margin-left:0px; margin-right:0px;}
#column2 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:2; margin-right:0em; margin-bottom:10px;}

}

/*-----------------
▼▼▼ 3カラム ▼▼▼
-----------------*/
#column3		{max-width:1450px; grid-template-areas:"nav article aside";display:grid; grid-template-columns:310px 1fr 310px; grid-template-rows:auto;display:-ms-grid; -ms-grid-columns:310px 1fr 310px; -ms-grid-rows:auto;}
#column3 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:1;}
#column3 #article	{grid-area:article; -ms-grid-column:2; -ms-grid-row:1; margin-left:10px; margin-right:10px;}
#column3 #sideright	{grid-area:aside; -ms-grid-column:3; -ms-grid-row:1;}

@media screen and (max-width:1470px) {
#column3		{max-width:1450px; grid-template-areas:"nav article aside";display:grid; grid-template-columns:1.5fr 3.5fr 1.5fr; grid-template-rows:auto;display:-ms-grid; -ms-grid-columns:1.5fr 3.5fr 1.5fr; -ms-grid-rows:auto;}
#column3 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:1;}
#column3 #article	{grid-area:article; -ms-grid-column:2; -ms-grid-row:1; margin-left:10px; margin-right:10px;}
#column3 #sideright	{grid-area:aside; -ms-grid-column:3; -ms-grid-row:1;}
}

@media screen and (max-width:1030px) {
#column3		{grid-template-areas:"nav article""aside aside"; display:grid; grid-template-columns:1fr 3fr; grid-template-rows:auto auto; display:-ms-grid; -ms-grid-columns:1fr 3fr; -ms-grid-rows:auto auto;}
#column3 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:1;}
#column3 #article	{grid-area:article; -ms-grid-column:2; -ms-grid-row:1; margin-right:0px;}
#column3 #sideright	{grid-area:aside; -ms-grid-column:2; -ms-grid-row:2; margin-left:0px;}
}

@media screen and (max-width:810px) {
#column3		{grid-template-areas:"article article article""nav nav nav""aside aside aside"; display:grid; grid-template-columns:100%; grid-template-rows:auto; display:-ms-grid; -ms-grid-columns:100%; -ms-grid-rows:auto auto auto;}
#column3 #article	{grid-area:article; -ms-grid-column:1; -ms-grid-row:1; margin-left:0px; margin-right:0px;}
#column3 #sideleft	{grid-area:nav; -ms-grid-column:1; -ms-grid-row:2;}
#column3 #sideright	{grid-area:aside; -ms-grid-column:1; -ms-grid-row:3; margin-left:0px;}
}

/*-----------------
▼Side bar
-----------------*/
#sideleft .flag		{top:20%;left:13%;}
#sideleft .textwidget,
#sideright .textwidget 					{width:100%; position:-webkit-sticky; position:-moz-sticky; position:-ms-sticky; position:-o-sticky; position:sticky; margin-bottom:0; top:65px; z-index:1; display:flex; flex-wrap: wrap;}

.widget_text		{position: relative;}
.widget_text .finished	{display:flex; justify-content:center; align-items:center; position:absolute; top:0%; left:0%;}

#column0 #sideright .textwidget,
#column0 #sideleft .textwidget,
#column1 #sideright .textwidget,
#column1 #sideleft .textwidget 				{position:static; margin-bottom:0; top:0px; padding-bottom:0px; z-index:1;}

#column0 #sideright .parents_side .child,
#column1 #sideright .parents_side .child		{float:left; width:calc(25% - 0px/ 4);}

#column0 #sideleft .parents_side .child,
#column1 #sideleft .parents_side .child			{float:left; width:calc(25% - 0px/ 4);}

#column0 #sideright .parents_side .child:nth-child(4n),
#column0 #sideleft .parents_side .child:nth-child(6n),
#column1 #sideright .parents_side .child:nth-child(4n),
#column1 #sideleft .parents_side .child:nth-child(4n)	{margin-right:0px;}

#column2 .parents_side .child,
#column3 .parents_side .child				{width:100%; text-align:left; margin:0px;}

#column2 .parents_side .child,
#column3 .parents_side .child				{float:left; width:calc(100% / 1);}

#column2 .parents_side .child:nth-child(1n),
#column3 .parents_side .child:nth-child(1n)		{margin-right:0px;}


@media screen and (max-width:1030px) {
	#column0 #sideleft .parents_side .child,
#column0 #sideright .parents_side .child			{width:calc(33.333% - 0px/ 3);}
	
	
#column3 #sideright .textwidget 			{position:static; margin-bottom:0; top:0px; padding-bottom:0px; z-index:1;}
#column3 #sideright .parents_side .child		{width:calc(25% - 0px/ 4);}
#column3 #sideright .parents_side .child:nth-child(4n)	{margin-right:0px;}
}

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


#column2 #sideright .parents_side .child		{width:calc(50% - 0px/ 2);}
#column2 #sideright .parents_side .child:nth-child(2n)	{margin-right:0px;}
#column2 #sideleft .parents_side .child			{float:left; width:calc(33.333% - 0px / 3);}

#column3 #sideleft .textwidget 				{position:static; margin-bottom:0; top:0px; padding-bottom:0px; z-index:1;}
#column3 #sideright .parents_side .child		{width:calc(25% - 0px/ 4);}
#column3 #sideright .parents_side .child:nth-child(4n)	{margin-right:0px;}


#column3 #sideleft .parents_side .child			{width:calc(33.333% - 0px/ 3);}
#column3 #sideleft .parents_side .child:nth-child(3n)	{margin-right:0px;}

.parents_footer .child					{width:calc(50% - 0px / 2); margin-bottom:0em;}
.parents_footer .child:nth-child(2n)			{margin-right:0px;}
}

@media screen and (max-width:660px) {
#column0 #sideleft .parents_side .child,
#column0 #sideright .parents_side .child,
#column1 #sideright .parents_side .child,
#column1 #sideleft .parents_side .child,
#column2 #sideright .parents_side .child,
#column2 #sideleft .parents_side .child,
#column3 #sideright .parents_side .child,
#column3 #sideleft .parents_side .child			{width:calc(50% - 0px / 2);}
#column3 #sideright .parents_side .child:nth-child(2n),
#column3 #sideleft .parents_side .child:nth-child(2n)	{margin-right:0px;}
}

@media screen and (max-width:520px) {
#column2 #sideright .parents_side .child,
#column2 #sideleft .parents_side .child	{float:left; width:calc(100% / 1);}
.parents_footer .child			{width:calc(100% / 1); margin-bottom:0em;}
.parents_footer .child			{text-align:center;margin-right:auto; argin-left:auto;}
}

@media screen and (max-width:480px) {
#column0 #sideleft .parents_side .child,
#column0 #sideright .parents_side .child			{float:left; width:calc(100% / 1);}
}

/*-----------------
▼Comment CSS
-----------------*/
#commentform			{max-width:600px; width:94%; margin:10px auto 20px auto !important;}
#commentform			{text-align:center; color:#333; margin:10px 53px 0px 53px; padding:1em 1em 0 1em; border-radius:10px; align-items:center; justify-content:left; background:#eee;}
#comments .comment-body .reply	{text-align:center; padding:15px 0px;}
#comments ul.children		{margin-left:50px;}
#respond			{text-align:center;}
#respond small a		{font-size:13px; padding:1em 0em 0.5em 0em; display:block;}
#respond small a:hover		{color:#cc0000;}

#respond p:last-of-type		{margin-bottom:0px;}

/*-----------------
▼Post design
-----------------*/
.post_imgs img,　.search_imgs img	{height:auto;}

/*-----------------
▼Table sort
-----------------*/
thead .asc span::before {content:"▼"; color:#aaa;}
thead .desc span::before {content:"▲"; color:#aaa;}

/*-----------------
▼Post pagination
-----------------*/
.pagination_wrap	{width:auto; display:table; text-align:center; font-size:0; margin:10px auto 30px auto;}
.pagination_wrap a,
.pagination_wrap span	{width:30px; height:30px; display:table-cell; vertical-align: middle; padding:0px 5px; font-size:14px; color:#fff;}

.pagination_wrap a:hover,
.pagination_wrap .push,
.pagination_wrap span	{border:solid 1px; background:#990000; border-color:#bb0000 #770000 #770000 #bb0000;}

@media screen and (max-width:810px) {
.pagination_wrap a,
.pagination_wrap span	{width:45px; height:45px;}
}