@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/***　フォント　***/

:root{
	--font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	--font-en: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif{
	font-family: var(--font-jp);
}
.font_en{
	font-family: var(--font-en);
}

/***　全ページ　***/

*:focus {outline:none;}
html{font-size:100%;}
body{-webkit-text-size-adjust: 100%;}
li{list-style: none;}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#page-top a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
#page-top a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
textarea{overflow: auto}

.shadow-h{
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.linkStyle{
	font-family: var(--font-en);
}

#header #logo{width: 120px;}

/***　loading　***/

#loading{
	z-index: 5;
	top: 0;
	left: 0;
}
#loading .loading_logo.active{
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.2);
	filter: blur(5px)
}

/** modal **/

.modal .modal_bt{
    cursor: pointer;
}
.modal .modal_box{
    top: 0;
    left: 0;
    z-index: 10000;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}
.modal .modal_box.active{
    opacity: 1;
    pointer-events: auto;
}
.modal .modal_box::-webkit-scrollbar{
    display:none;
}
.modal .modal_box .modal_bg{
    top: 0;
    left: 0;
}
.modal .modal_box .modal_close{
    cursor: pointer;
    top: 10px;
    right: 10px;
}

/***　fade　***/

.fadein .fade_box{
	opacity: 0;
	filter: blur(3px);
	transform: translateY(10px);
	transition-duration: 1s;
	transition-property: opacity, filter, transform;
}
.fadein .fade_box.active{
	opacity: 1;
	filter: none;
	transform: none;
}

/***　ヘッダー　***/

#header{
	z-index: 3;
}
#header .header_item{
	/* height: 100px; */
	height: 80px;
}

#nav_bt{
	z-index: 2;
	cursor: pointer;
}
#nav_bt .nav_bar{
	height: 1px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: background-color 0.3s;
}
#nav_bt.active .nav_bar{
	background-color: transparent;
}
#nav_bt .nav_bar::before, #nav_bt .nav_bar::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--black);
	left: 0;
	right: 0;
	margin: auto;
	transition: 0.3s;
	transition-property: transform top bottom;
}
#nav_bt .nav_bar::before{
	bottom: 8px;
}
#nav_bt .nav_bar::after{
	top: 8px;
}
#nav_bt .nav_name{
	left: 0;
	bottom: -10px;
}
#nav_bt.active .nav_bar::before{
	bottom: 0;
	transform: rotate(45deg);
}
#nav_bt.active .nav_bar::after{
	top: 0;
	transform: rotate(-45deg);
}

#header_nav li:not(:last-of-type){
	background-image: linear-gradient(to bottom, var(--color4), var(--color4));
	background-repeat: no-repeat;
	background-size: 1px 20px;
	background-position: right center;
}

#header_nav2{
	top: 0;
	left: 0;
	z-index: 1;
}
#header_nav2 .nav_arrow{
	right: 10px;
	top: calc(10px + 1em);
	transform: translateY(-50%);
}
#header_nav2 .nav_arrow::before, #header_nav2 .nav_arrow::after{
	position: absolute;
	content: "";
	width: 15px;
	height: 1px;
	background-color: var(--color1);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#header_nav2 .nav_arrow::after{
	transition: transform 0.3s;
	transform: rotate(90deg);
}
#header_nav2 .nav_arrow.active::after{
	transform: none;
}
#header_nav2 .nav_cate > a i{
	top: calc(10px + 0.5em);
	left: 10px;
}
#header_nav2 .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

/***　フッター　***/

.footer_right .page_top.posi_fix{
	right: 20px;
	bottom: -60px;
	z-index: 1;
	background-color: rgba(255,255,255,0.8);
}
.footer_right .page_top.posi_fix.active{
	bottom: 20px;
}
.footer_right .page_top:hover{
	transform: translateY(-5px);
}
#footer_nav .nav_cate > a i{
	top: 0.5em;
	left: 10px;
}
#footer_nav .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

#copyright{
	background-color: rgba(255,255,255,0.1);
}

/***　index　***/

#main_img{
	/* height: 700px; */
	height: 85vh;
}
#main_img .catch{
	width: calc(100% - 100px);
	/* top: 50%; */
	top: 30%;
	left: 5%;
	transform: translateY(-50%);
	z-index: 2;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5))
}
#main_img .slide3{
	background-position: 60% 50%;
}
#main_img .swiper{
	z-index: auto;
}
#main_img .swiper-pagination{
	width: auto;
	left: auto;
	right: 50px;
	bottom: 50px;
	z-index: 2;
}
.swiper-pagination-bullet, .swiper-pagination-bullet-active{
	width: 20px!important;
	height: 20px!important;
	background: none!important;
	opacity: 1!important;
	position: relative;
	transition: none;
	cursor: pointer;
}
.swiper-pagination-bullet::before{
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #fff;
	transition: 0.3s;
	background-position: badkground-color, width, height;
	border-radius: 50%;
}
.swiper-pagination-bullet-active::before{
	border: solid 1px #fff;
	background-color: transparent;
	width: 12px;
	height: 12px;
}

#top_contact{
	/* margin-top: -45px; */
	margin-bottom: -45px;
	z-index: 2;
}

.more_arrow::before, .more_arrow::after{
	position: absolute;
	content: "";
	background-color: #fff;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.3s;
}
.more_arrow::before{
	width: calc(100% - 10px);
	right: 5px;
	height: 1px;
}
.more_arrow::after{
	width: 7px;
	height: 7px;
	right: 0;
	border-radius: 10px;
}
.more:hover .more_arrow::before{
	width: calc(100% - 20px);
}
.more:hover .more_arrow::after{
	transform: scale(4);
	opacity: 0.2;
}

.con_title{
	background-image: linear-gradient(to right, var(--color1), var(--color3));
	background-repeat: no-repeat;
	background-size: 100px 1px;
	background-position: bottom center;
}

.cate_wrap{
	counter-reset: number 0;
}
.cate_wrap .cate_no{
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 50px 1px;
	background-position: right center;
	padding-right: 70px;
}
.cate_wrap .cate_no::after{
	counter-increment: number 1;
	content: counter(number);
}

#top_service .top_service_wrap{
	background-image: linear-gradient(to right, var(--color2), var(--color2));
	background-repeat: no-repeat;
	background-size: 100% calc(100% - 60px);
	background-position: top 30px left 0;
}
#top_service .cate:nth-of-type(2) .cate_bg{
	background-position: 50% 30%
}
#top_service .cate a:hover .cate_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.6;
	filter: blur(2px);
}

#top_link h3{
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 30px 1px;
	background-position: bottom;
}
#top_link a:hover .linke_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.4;
	filter: blur(2px);
}
#top_link a:hover .more_arrow::before{
	width: calc(100% - 20px);
}
#top_link a:hover .more_arrow::after{
	transform: scale(4);
	opacity: 0.2;
}

#top_sustainability .sus_title{
	background-image: linear-gradient(to right, var(--color1), var(--color3)), linear-gradient(to right, var(--color4), var(--color4));
	background-repeat: no-repeat;
	background-size: 11em 1px, 100% 1px;
	background-position: top left;
}
#top_sustainability .cate_item{
	width: calc(100% - 40px);
	box-sizing: border-box;
	margin-top: -50px;
	background-image: linear-gradient(to right, var(--color1), var(--color1));
	background-repeat: no-repeat;
	background-size: 5px calc(100% - 60px);
	background-position: top 30px left 0;
	min-height: calc(60px + 3em);
}
#top_sustainability .cate a:hover img{
	transform: translate(-50%, -50%) scale(1.05);
}
#top_sustainability .top_cate_title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#top_sustainability .cate_item i{
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

#top_contact2{
	margin-bottom: -50px;
}
#top_contact2 h2{
	padding-right: 70px;
}
#top_contact2 h2::before, #top_contact2 h2::after{
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	margin: auto;
}
#top_contact2 h2::before{
	width: 40px;
	height: 40px;
	border: solid 1px;
	border-radius: 50%;
	right: 0;
}
#top_contact2 h2::after{
	width: 10px;
	height: 10px;
	border-top: solid 2px;
	border-right: solid 2px;
	right: 17px;
	transform: rotate(45deg);
}
#top_contact2 a:hover .contact_bg{
	transform: translate(-50%, -50%) scale(1.05);
	opacity: 0.4;
	filter: blur(2px);
}

/***　page_title, cate_title, table　***/

#page_title{
	transition: background-color 2s ease;
	padding-top: 70px;
}
#page_title::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	bottom: -1px;
	left: 0;
	z-index: 1;
}
#page_title.active{
	background-color: var(--color2);
}
#page_title.active .page_bg{
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 0.5;
	transition-property: opacity, transform;
	transition-duration: 1s, 2s;
	transition-timing-function: ease, cubic-bezier(0,.5,.2,1);
}
#page_title .page_wrap{
	background-color: rgba(255,255,255,0.8);
	background-image: linear-gradient(to right, var(--color1), var(--color3));
	background-size: 0 5px;
	background-position: bottom center;
	background-repeat: no-repeat;
	transition: background-size 2s cubic-bezier(0,.5,.2,1);
	z-index: 1;
}
#page_title.active .page_wrap{
	background-size: 100px 5px;
}

.box_wrap{
	counter-reset: number 0
}

.cate_title.border_grad{
	background-image: linear-gradient(to bottom, var(--color3), var(--color1));
	background-repeat: no-repeat;
	background-size: 5px 100%;
	background-position: left top;
}
.cate_box .box_no::after{
	counter-increment: number 1;
	content: counter(number);
}

.flex_stretch{
	justify-content: flex-start;
}

.table_box{
	border-collapse: collapse;
}

/***　page02　***/

#page02 .cate:not(:first-of-type){
	background-image: linear-gradient(to right, var(--color1), var(--color3)), linear-gradient(to right, var(--color4), var(--color4));
	background-size: 100px 1px, 100% 1px;
	background-position: top center;
	background-repeat: no-repeat;
}
#page02 .cate_box:nth-child(odd){
	flex-direction: row-reverse
}
#page02 .cate_box:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

/***　page03　***/

#page03 .cate_img1{
	height: 300px;
}
#page03 .faq_box .box_title1{
	cursor: pointer;
}
#page03 .faq_box .box_title1::before, #page03 .faq_box .box_txt1::before{
	position: absolute;
	font-size: 20px;
	font-family: var(--font-en);
	left: 17px;
	line-height: 1;
	font-weight: normal;
}
#page03 .faq_box .box_title1::before{
	content: "Q";
	color: var(--color1);
	top: 22px;
}
#page03 .faq_box .box_txt1::before{
	content: "A";
	opacity: 0.6;
	top: 24px;
}
#page03 .faq_box .arrow{
	width: 15px;
	height: 15px;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
}
#page03 .faq_box .box_title1 .arrow::before, #page03 .faq_box .box_title1 .arrow::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--color1);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: transform 0.3s
}
#page03 .faq_box .box_title1 .arrow::after{
	transform: rotate(90deg);
}
#page03 .faq_box .box_title1.active .arrow::after{
	transform: rotate(0);
}

/***　page04　***/

#page04 .cate_img1{
	height: 300px;
}
#page04 .box_no{
	top: 0.5em;
	left: 0;
	padding-left: 10px;
	border-left: solid 1px;
}

/***　page05　***/

#page05 .info_map iframe{
	display: block;
	width: 100%;
	height: 400px;
}

/***　page07　***/

#page07 .tel_title{
	background-image: linear-gradient(to right, var(--color1), var(--color1));
	background-size: 100px 1px;
	background-position: bottom center;
	background-repeat: no-repeat;
}

#page07 #checkpolicy{
    height: 300px;
    overflow-y: auto;
}

/* radio checkbox */

.radio_wrap label, .check_wrap label{
    cursor: pointer;
}
.radio_wrap label::before, .radio_wrap label::after, .check_wrap label::before, .check_wrap label::after {
	content: "";
	display: block; 
	position: absolute;
}
.radio_wrap label::before{
	transform: translateY(-50%);
	top: 50%;
	border-radius: 50%;
	background-color: var(--color4);
	border: 1px solid var(--color4);
	width: 20px;
	height: 20px;
	left: 0;
	transition: 0.2s;
}
.radio_wrap label::after {
	transform: translateY(-50%);
	top: 50%;
	border-radius: 50%;
	background-color: var(--color1);
	opacity: 0;
    width: 14px;
    height: 14px;
    left: 4px;
	transition: 0.2s;
}
.check_wrap label::before {
	transform: translateY(-50%);
	top: 50%;
	border: none;
	background-color: var(--color4);
	width: 20px;
	height: 20px;
	left: 0;
	transition: 0.2s;
	border-radius: 2px;
}
.check_wrap label::after{
    opacity: 0;
    width: 10px;
    height: 5px;
    left: 5px;
    transition: 0.2s;
}
.check_wrap label::after {
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    top: 6px;
    transform: translateY(-50%) rotate(-45deg);
}
.check_wrap.custom label::after {
    top: calc(50% - 2px);
}

.radio_wrap input:checked + label::before{
	background-color: transparent;
	border-color: var(--sysColor1);
}
.check_wrap.custom input:checked + label::before{
	background-color: var(--color1);
	border-color: var(--color1);
}
.radio_wrap input:checked + label::after, .check_wrap input:checked + label::after {
	opacity: 1;
}
.radio_wrap input:checked + label, .check_wrap input:checked + label {
	color: var(--color1)
}

.radio_wrap .visually-hidden, .check_wrap .visually-hidden {
	display: none;
}

input::placeholder{
    color: var(--black);
    opacity: 0.3;
}

/***　page08　***/

#page08 .nav_cate > a i{
	top: calc(10px + 0.5em);
	left: 10px;
}
#page08 .nav_box a i{
	top: calc(5px + 0.25em);
	left: 0;
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
#header .header_item{
	height: 70px;
}
#nav_bt{
	right: 10px;
}
#main_img{
	height: 80vh;
}
#top_sustainability .cate_item{
	margin-top: -20px;
	background-size: 5px calc(100% - 40px);
	background-position: top 20px left 0;
	min-height: calc(40px + 3em);
}
#page_title{
	padding-top: 50px;
}
#page03 .cate_img1{
	height: 50vw;
}
#page04 .cate_img1{
	height: 50vw;
}
	
#pager li:not(.prev):not(.next){
	display: none;
}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
#main_img::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 70%;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
	z-index: 2;
}
#main_img .catch{
	left: 20px;
	top: auto;
	bottom: 100px;
	transform: none;
}
#main_img .swiper-pagination {
    right: 20px;
}
#top_sustainability .cate_item{
	min-height: inherit;
}
#top_contact2 h2{
	padding-right: 50px;
}

#header_nav2{
	overflow-y: scroll;
}

.table_wrap{
	overflow-x: scroll;
}
.table_wrap .table_box{
	width: 700px!important;
}

#page03 .scroll_txt, #page04 .scroll_txt{
	top: 30px;
}
#page06 .scroll_txt{
	top: 10px;
}
.footer_right .page_top.posi_fix{
	right: 10px;
	bottom: -50px;
}
.footer_right .page_top.posi_fix.active{
	bottom: 10px;
}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/* TOP Blogタブ切り替え -----------------------------------------------------------*/
#top_blog .tab {
  display: flex;
  flex-wrap: wrap;
}
#top_blog .tab li a {
  display: block;
  background: var(--color4);;
  margin: 0 2px;
  padding: 5px 20px;
  color: var(--black);
}
#top_blog .tab li.active a {
  background: #fff;
  color: var(--color1);
  font-weight: bold;
}

/* コンテンツエリア */
#top_blog .area {
  display: none;
  opacity: 0;
  background: #fff;
  padding: 20px 3%;
  min-height: 150px;
}
#top_blog .area.is-active {
  display: block;
  animation: displayAnime 0.5s forwards;
}

/* フェードインアニメーション */
@keyframes displayAnime {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* TOP Blog -----------------------------------------------------------*/
#top_blog{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 3vh;
}
/*
#top_blog .top_blog_wrap{
    align-items: stretch;
}
#top_blog .con_box{
    width: calc(50% - 3px);
    padding: 20px 3%;
    box-sizing: border-box;
}*/
#top_blog .con_box .top_blog_title{
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 5px;
    position: relative;
}
#top_blog .con_box .top_blog_title h2{
    font-size: 110%;
}
#top_blog .con_box .top_blog_title p{
    font-size: 70%;
    letter-spacing: 1.5px;
}
#top_blog .con_box .top_blog_title:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: var(--color1);
    background-color: var(--color1);
    left: calc(-3% - 2px);
}
#top_blog .blogListPattern_item a{
    font-size: 85%;
    padding: 5px 10px;
}
#top_blog .blogListPattern_item:last-child a{
    border-bottom: none;
}

#top_blog .con_box .more{
    padding: 0px 0 6px;
    transition: all 0.3s;
    font-size: 90%;
}
#top_blog .con_box .more i,#top_blog .con_box .more span{
    color: var(--color1);
}
#top_blog .con_box .more:hover{
    opacity: 0.6;
}


/* TOP Blog タブレット用（780px以下）環境の設-------------------*/
@media screen and (max-width: 768px){}


/* TOP Blog ここからスマホ用（750px以下）環境の設定-------------------*/
@media screen and (max-width: 667px){
    #top_blog{
        z-index: 3;
    }
    #top_blog .top_blog_wrap{
        margin-top: -80px;
    }
    #top_blog .con_box{
        width: calc(100% - 20px);
    }
    #top_blog .con_box .top_blog_title:before{
        height: 5px;
        width: 150px;
        left: 50%;
        transform: translate(-50%, 0);
        top: -20px;
    }
    #top_blog .con_box .top_blog_title{
        padding: 0;
    }
    #top_blog .con_box .top_blog_title h2,#top_blog .con_box .top_blog_title p{
        margin: 0 auto;
        text-align: center;
    }
    
    #top_blog .con_box .more{}
    
    #top_blog .area{min-height: 290px;}
}
/* Blogページャー -----------------------------------------------------------*/
#blog_page .blog_pager li a.txt_color_nomal{
    color: var(--black);
    padding: 10px 20px;
}
#blog_page .blog_pager li a.active{
    background-color: var(--color2);
    border-color: var(--color4);
}


/* Blogページ -----------------------------------------------------------*/

.all_blog_link{
    display: block;
    width: fit-content;
    margin-top: 20px;
}

#blog_page .blog_body{
    width: 100%!important;
}
#blog_cate2 .blog_sub,#blog_cate3 .blog_sub{display: none;}

/*Allの時にカテゴリ表示*/
#blog_cate2 .blogCate,#blog_cate3 .blogCate{display: none;}
#blog_cate1 .blogListDate{width: 18% !important;}
#blog_cate1 .blogCate{
    width: 10% !important;
    margin-right: 2%;
    box-sizing: border-box;
    font-size: 70%;
    text-align: center;
    border-radius: 20px;
    border: 1px solid var(--color4);
    background-color: var(--color2);
}
/* プレスリリースのバッチ */
#blog_cate1 .blogCate.press{
    border: 1px solid #d0d9e1;
    background-color: #d1e7ff;
    color: var(--color3);
}

/* お知らせのバッチ */
#blog_cate1 .blogCate.news{}

#blog_cate1 .blogListTitle{width: 70% !important;}

/* Blogページ タブレット用（780px以下）環境の設定-------------------*/
@media screen and (max-width: 768px){
    #blog_cate1 .blogListDate{
        width: 30%!important;
        font-size: 80%;
    }
    #blog_cate1 .blogCate{
        width: 20% !important;
        margin: 0% 0% 0% 50%;
    }
    #blog_cate1 .blogListTitle{width: 100%!important;}
}


/* Blogページ ここからスマホ用（750px以下）環境の設定-------------------*/
@media screen and (max-width: 667px){
    
    #blog_page .cate_title.border_grad{}
    #blog_page .blogListDate{
        font-size: 80%;
        opacity: 0.6;
    }
    
    #blog_cate1 .blogListDate{width: 50%!important;}
    #blog_cate1 .blogCate{
        width: 36% !important;
        margin: 0% 0% 0% 14%;
        font-size: 60%;
    }
}