@charset "utf-8";
/*--------------------------------------------------
* style.css
*--------------------------------------------------*/
html {
overflow-y: scroll;
font-size: 62.5%;
height: 100%;
line-height:62.5%;
}
body{
margin:0px;
padding:0px;
/*font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;*/
font-family: 'Noto Sans JP', sans-serif;
color:#333333;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
input,select,textarea{
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
a{
color:#1555d5;
text-decoration: none;
}
a:hover{
color:#37f;
text-decoration: underline;
}
a img { border:0px; }
img{
width:100%;
max-width:100%;
}
ul {
list-style:none;
display:block;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
margin:0px;
padding:0px;
text-align:left;
}
table {
border-collapse: collapse;
table-layout: fixed;
width:100%
}
/*---------------------------
* font
*--------------------------- */
p {
font-family: 'Noto Sans JP', sans-serif;
/* font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif; */
}
p,label,dd{
font-size:1.3rem;
line-height:2rem;
}
.p_label{
display:block;
padding:8px 0px 8px 0px;
}
h2{
font-size:1.8em;
line-height:2.5rem;
font-weight:bold;
}
.alert{
color:#cc0000;
}
.redbold{
color:#cc0000;
font-weight: bold;
}
.invalid{
color:#666666;
}
.color-red{
color:#E53E2A;
}
.ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*---------------------------
* サイト幅
*--------------------------- */
.container{
max-width:1160px;
padding:0px 10px 0px 10px;
margin:0px auto;
overflow: hidden;
}
/*---------------------------
* input
*--------------------------- */
input[type="text"],
input[type="password"],
input[type="email"]
{
padding:8px 12px;
border-top:solid 1px #ABADB3;
border-right:solid 1px #DBDFE6;
border-bottom:solid 1px #E3E9EF;
border-left:solid 1px #E2E3EA;
border-radius: 2px;
box-sizing:border-box;
font-size: 15px;
font-family: "ＭＳ ゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
width:100%;
}
textarea{
padding:8px 12px;
border-top:solid 1px #ABADB3;
border-right:solid 1px #DBDFE6;
border-bottom:solid 1px #E3E9EF;
border-left:solid 1px #E2E3EA;
border-radius: 2px;
box-sizing:border-box;
font-size: 15px;
line-height:20px;
font-family: "ＭＳ ゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
width:100%;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
border-color: #337ab7;
}
input[type="text"]::-webkit-input-placeholder,input[type="password"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder{ color: #cccccc; }
input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder{ color: #cccccc;}
input[type="text"]::-moz-placeholder,input[type="password"]::-moz-placeholder,input[type="email"]::-moz-placeholder{ color: #cccccc; }
select{
font-size: 15px;
padding:8px 12px;
max-width:100%;
}
input[type="radio"]{
display:inline;
vertical-align:middle;
margin:0px 5px 0px 0px;
}
input.checkbox{
margin:11px 0px 11px 0px;
}
input.attention::-webkit-input-placeholder {
color: #ff0000;
font-weight: normal;
}
input.attention:-ms-input-placeholder {
color: #ff0000;
font-weight: normal;
}
input.attention::-moz-placeholder {
color: #ff0000;
font-weight: normal;
}
input[type="submit"],
input[type="button"]{
-webkit-appearance: none;
}
/*---------------------------
* その他
*--------------------------- */
.vertical-align-top{ vertical-align: top !important; }
.vertical-align-middle{ vertical-align: middle !important; }
.vertical-align-bottom{ vertical-align: bottom !important; }
.text-left { text-align: left !important; }
.text-center{ text-align: center !important; }
.text-right { text-align: right !important; }
.mb-0{ margin-bottom:0.0rem !important; }
.mb-1{ margin-bottom:0.5rem !important; }
.mb-2{ margin-bottom:1.0rem !important; }
.mb-3{ margin-bottom:2.5rem !important; }
.mb-4{ margin-bottom:4.0rem !important; }
.mb-5{ margin-bottom:6.0rem !important; }
.mt-0{ margin-top:0.0rem !important; }
.mt-1{ margin-top:0.5rem !important; }
.mt-2{ margin-top:1.0rem !important; }
.mt-3{ margin-top:2.5rem !important; }
.mt-4{ margin-top:4.0rem !important; }
.mt-5{ margin-top:6.0rem !important; }
.p-0{ padding:0.0rem !important; }
.p-1{ padding:0.5rem !important; }
.p-2{ padding:1.0rem !important; }
.p-3{ padding:2.5rem !important; }
.p-4{ padding:4.0rem !important; }
.p-5{ padding:6.0rem !important; }
.pb-0{ padding-bottom:0.0rem !important; }
.pb-1{ padding-bottom:0.5rem !important; }
.pb-2{ padding-bottom:1.0rem !important; }
.pb-3{ padding-bottom:2.5rem !important; }
.pb-4{ padding-bottom:4.0rem !important; }
.pb-5{ padding-bottom:6.0rem !important; }
.pt-0{ padding-top:0.0rem !important; }
.pt-1{ padding-top:0.5rem !important; }
.pt-2{ padding-top:1.0rem !important; }
.pt-3{ padding-top:2.5rem !important; }
.pt-4{ padding-top:4.0rem !important; }
.pt-5{ padding-top:6.0rem !important; }
.pl-0{ padding-left:0.0rem !important; }
.pl-1{ padding-left:0.5rem !important; }
.pl-2{ padding-left:1.0rem !important; }
.pl-3{ padding-left:2.5rem !important; }
.pl-4{ padding-left:4.0rem !important; }
.pl-5{ padding-left:6.0rem !important; }
.pr-0{ padding-right:0.0rem !important; }
.pr-1{ padding-right:0.5rem !important; }
.pr-2{ padding-right:1.0rem !important; }
.pr-3{ padding-right:2.5rem !important; }
.pr-4{ padding-right:4.0rem !important; }
.pr-5{ padding-right:6.0rem !important; }
.float-left{ float:left !important; }
.float-right{ float:right !important; }
.font-weight-bold{ font-weight:bold !important; }
/* テーブルの右の線を消したいときに利用 */
.no-border-right{border-right: none !important; }
.pc_only{ display: block; }
.sp_only{ display: none; }
@media screen and (min-width: 0px) and (max-width:767px){
.pc_only{ display: none; }
.sp_only{ display: block; }
}
/*--------------------------------------------------
* ヘッダー
*--------------------------------------------------*/
header {
position: fixed;
background-color: #FFF;
z-index: 9999;
width: 100%;
box-shadow: 0 32px 30px -27px rgba(53, 47, 47, 0.15);
}
header h3{
font-size:2rem;
line-height:2.5rem;
}
header .band{
background-color: #58B331;
text-align:center;
color:#fff;
padding:15px 0px 15px 0px;
font-size:1.5rem;
line-height:1.7rem;
margin-bottom:15px;
}
header .wrap{
padding:0px 30px;
}
header .header_table{
display:table;
width:100%;
margin-bottom:20px;
}
header .header_table .logo{
display:table-cell;
width:45%;
vertical-align: middle;
padding:0px 30px 0px 0px;
}
header .header_table .logo img{
max-width:420px;
}
header .header_table .info{
display:table-cell;
width:36%;
vertical-align: middle;
font-size:1.7rem;
line-height:2.5rem;
padding:0px 0px 0px 0px;
}
header .header_table .info img{
margin-bottom:5px;
}
header .header_table .sns{
display:table-cell;
width:auto;
vertical-align: middle;
}
header .header_table .sns ul{
display:table;
width:100%;
}
header .header_table .sns ul li{
display:table-cell;
width:50%;
text-align:center;
}
header .header_table .sns ul li img{
max-width:63%;
}
@media screen and (min-width: 768px) and (max-width:991px){
header h3{
font-size:1.8rem;
line-height:2.3rem;
}
header .header_table .info{
font-size:1.4rem;
line-height:2.0rem;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
header h3{
font-size:1.7rem;
line-height:2.2rem;
}
header .wrap{
padding:0px 10px;
}
header .header_table{
display:block;
}
header .header_table .logo{
display:block;
width:100%;
padding:0px 0px 0px 0px;
vertical-align: middle;
margin:0px auto 20px auto;
text-align:center;
}
header .header_table .info{
width:60%;
padding:0px;
font-size:1.4rem;
line-height:2.0rem;
}
header .header_table .sns ul li img{
max-width:60px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
header .wrap{
padding:0px;
}
header h3{
font-size:1.3rem;
line-height:1.7rem;
}
header .header_table{
display:block;
}
header .header_table .logo{
display:block;
width:100%;
padding:0px 0px 0px 0px;
vertical-align: middle;
margin:0px auto 20px auto;
text-align:center;
}
header .header_table .info{
display:block;
width:100%;
padding:0px;
font-size:1.3rem;
line-height:1.5rem;
text-align:center;
margin-bottom:20px;
}
header .header_table .info img{
margin-bottom:10px;
max-width:260px;
}
header .header_table .sns{
display:block;
width:100%;
}
header .header_table .sns ul li img{
max-width:60px;
}
}
/*--------------------------------------------------
* フッター
*--------------------------------------------------*/
footer {
background: #EB7BAA;
/*color: #fff;*/
color:#000;
}
footer .bk_sakura1 {
background: url(../img/footer_bg_sakura1.png ) no-repeat top left;
background-size: 128px auto;
max-width:1140px;
margin:0px auto;
}
footer .bk_sakura2{
background: url(../img/footer_bg_sakura2.png ) no-repeat right 10%;
background-size: 150px auto;
max-width:1140px;
margin:0px auto;
}
footer .bk_sakura3{
background: url(../img/footer_bg_sakura3.png ) no-repeat 60% bottom;
background-size: 150px auto;
max-width:1140px;
margin:0px auto;
}
footer .wrap{
padding:40px 30px 20px 30px;
}
footer .footer_table{
display:table;
width:100%;
}
/* ロゴ */
footer .footer_table .logo{
display:table-cell;
width:45%;
vertical-align: middle;
padding:0px 30px 20px 0px;
}
footer .footer_table .logo img{
max-width:440px;
}
/* フリーダイヤル */
footer .footer_table .info{
display:table-cell;
width:auto;
vertical-align: middle;
text-align:center;
padding:0px 0px 20px 0px;
}
footer .footer_table .info img{
max-width:550px;
}
/* 6つのアイコン */
footer .footer_table .items{
display:table-cell;
width:53%;
vertical-align: middle;
padding-bottom:30px;
}
footer .footer_table .items ul{
display:table;
width:100%;
}
footer .footer_table .items ul li{
display:table-cell;
width:16%;
text-align:center;
padding-right:15px;
}
footer .footer_table .items ul li img{
max-width:80px;
}
/* 事業内容 */
footer .footer_table .business{
display:table-cell;
width:auto;
vertical-align: middle;
padding-bottom:30px;
}
footer .footer_table .business p{
font-size:2.2rem;
line-height:2.5rem;
margin-bottom:1rem;
text-align:center;
}
footer .footer_table .business ul{
padding-left:30px;
}
footer .footer_table .business ul li{
font-size:1.8rem;
line-height:2.3rem;
margin-bottom:1rem;
list-style: disc;
text-shadow: 1px 1px 1px #ffffff;
}
/* 遺品整理士 */
footer .footer_table .ihinseiri{
display:table-cell;
width:53%;
vertical-align: middle;
padding-bottom:30px;
font-size:1.8rem;
line-height:2.3rem;
}
footer .footer_table .ihinseiri img{
max-width:130px;
}
footer .footer_table .ihinseiri table{
width:100%;
}
footer .footer_table .ihinseiri table td{
vertical-align: middle;
line-height:150%;
}
footer .footer_table .ihinseiri table td.banner{
width:140px;
}
/* 住所・電話番号 */
footer .footer_table .address{
display:table-cell;
width:auto;
/*vertical-align: middle;*/
padding-bottom:30px;
text-align:right;
font-size:1.8rem;
line-height:2.3rem;
}
/* copyright */
footer .copyright{
text-align:right;
}
@media screen and (min-width: 768px) and (max-width:991px){
footer .footer_table .business p{
font-size:1.6rem;
line-height:2.0rem;
}
footer .footer_table .business ul li{
font-size: 1.4rem;
line-height: 2.0rem;
}
footer .footer_table .ihinseiri{
font-size: 1.4rem;
line-height: 2.0rem;
}
footer .footer_table .address{
font-size: 1.4rem;
line-height: 2.0rem;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
footer .wrap{
padding:30px 10px 20px 10px;
}
/* 6つのアイコン */
footer .footer_table .items{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .items ul li{
display:table-cell;
width:16%;
text-align:center;
padding:0px 15px;
}
/* 事業内容 */
footer .footer_table .business{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .business p{
font-size:1.6rem;
line-height:2.0rem;
margin-bottom:1rem;
}
footer .footer_table .business ui{
padding-left:25px;
}
footer .footer_table .business ul li{
font-size: 1.4rem;
line-height: 2.0rem;
}
/* 遺品整理士 */
footer .footer_table .ihinseiri{
display:block;
width:100%;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .ihinseiri table{
width:auto;
margin:0px auto;
}
/* 住所・電話番号 */
footer .footer_table .address{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
/* copyright */
footer .copyright{
text-align:center;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
footer .wrap{
padding:20px 0px 20px 0px;
}
footer .footer_table{
display:block;
}
/* 6つのアイコン */
footer .footer_table .items{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .items ul li{
display:table-cell;
width:16%;
text-align:center;
padding:0px 5px;
}
/* 事業内容 */
footer .footer_table .business{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .business p{
font-size:1.4rem;
line-height:1.4rem;
}
footer .footer_table .business ul{
padding-left:12px;
}
footer .footer_table .business ul li{
font-size:1.2rem;
line-height:1.5rem;
}
/* ロゴ */
footer .footer_table .logo{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .logo img{
max-width:260px;
}
/* フリーダイヤル */
footer .footer_table .info{
display:block;
width:100%;
text-align:center;
padding:0px;
margin-bottom:20px;
}
footer .footer_table .info img{
max-width:260px;
}
/* 遺品整理士 */
footer .footer_table .ihinseiri{
display:block;
width:100%;
padding:0px;
font-size:1.2rem;
line-height:1.5rem;
margin-bottom:20px;
}
footer .footer_table .ihinseiri table{
width:auto;
margin:0px auto;
}
/* 住所・電話番号 */
footer .footer_table .address{
display:block;
width:100%;
text-align:center;
padding:0px;
font-size:1.2rem;
line-height:1.5rem;
margin-bottom:20px;
}
/* copyright */
footer .copyright{
text-align:center;
}
}
.pagetop {
display: none;
position: fixed;
/*bottom: 30px;*/
bottom: 85px;
right: 10px;
z-index:100;
}
.pagetop a {
display: block;
background-color: #ccc;
text-align: center;
color: #222;
font-size: 14px;
text-decoration: none;
padding: 13px 13px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.pagetop a:hover {
background-color: #FDCC19;
color: #fff;
text-decoration: none;
}
/*---------------------------
* メニュー
*--------------------------- */
section.sp_menu {
margin-top:-100px;
}
section.sp_menu .menu_table{
display: table;
width:100%;
}
section.sp_menu .menu_table > div{
display: table-cell;
width:50%;
}
section.sp_menu ul{
display: table;
width:100%;
table-layout: fixed;
}
section.sp_menu ul li{
display: table-cell;
text-align:center;
padding:0px 3px 0px 3px;
vertical-align: middle;
}
section.sp_menu ul li a{
display:block;
width:100%;
background-color: #E8567C;
border:solid 2px #fff;
color:#fff;
}
section.sp_menu ul li .top{
background: url(../img/icon_kasumi.png) no-repeat 10px center;
background-size: 50px auto;
}
section.sp_menu ul li a:hover{
text-decoration: none;
}
section.sp_menu ul li .box{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: center; /* Safari */
align-items: center;
-webkit-justify-content: center; /* Safari */
justify-content: center;
height:70px;
}
section.sp_menu ul li .text{
display:inline-block;
font-size:1.8rem;
line-height:2rem;
}
section.sp_menu ul li .text span{
font-size:1.5rem;
line-height:1.7rem;
}
section.sp_menu{
visibility: hidden;
}
section.hidden_menu {
margin-top:-100px;
}
section.hidden_menu2 {
margin-top:150px;
}
@media screen and (min-width: 0px) and (max-width:767px){
section.sp_menu{
visibility: visible;
}
section.sp_menu .menu_table{
display: block;
width:100%;
}
section.sp_menu .menu_table > div{
display: block;
width:100%;
margin-bottom:5px;
}
section.sp_menu ul li .box{
height:50px;
}
section.sp_menu ul li .top{
background: url(../img/icon_kasumi.png) no-repeat 10px center;
background-size: 15px auto;
}
section.sp_menu ul li .text{
display:inline-block;
font-size:1.3rem;
line-height:1.5rem;
}
section.sp_menu ul li .text span{
font-size:1rem;
line-height:1.2rem;
}
}
.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
margin-top:0px !important;
}
h2{
font-size:3.6rem;
line-height:3.6rem;
font-weight:normal;
text-align:center;
}
.font7{
font-size:1.4rem;
line-height:2.8rem;
}
.font8{
font-size:1.6rem;
line-height:3rem;
}
.font9{
font-size:1.8rem;
line-height:3rem;
}
.font10{
font-size:2.0rem;
line-height:3rem;
}
.font12{
font-size:2.4rem;
line-height:3.8rem;
}
.font14{
font-size:2.8rem;
line-height:4.8rem;
}
.font16{
font-size:2.8rem;
}
.title_box{
padding:0px 50px 0px 50px;
}
.section_box{
margin-bottom:100px;
}
@media screen and (min-width: 768px) and (max-width:991px){
h2{
font-size:3.0rem;
line-height:3.0rem;
font-weight:normal;
}
.font7{
font-size:1.4rem;
line-height:2.8rem;
}
.font8{
font-size:1.6rem;
line-height:3rem;
}
.font9{
font-size:1.6rem;
line-height:3rem;
}
.font10{
font-size:1.8rem;
line-height:3.2rem;
}
.font12{
font-size:2.4rem;
line-height:3.8rem;
}
.font14{
font-size:2.8rem;
line-height:4.8rem;
}
.font16{
font-size:2.8rem;
}
.title_box{
padding:0px 30px 0px 30px;
}
.section_box{
margin-bottom:100px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
h2{
font-size:2.5rem;
line-height:2.5rem;
font-weight:normal;
}
.font7{
font-size:1.3rem;
line-height:2.3rem;
}
.font8{
font-size:1.4rem;
line-height:2.5rem;
}
.font9{
font-size:1.4rem;
line-height:2.5rem;
}
.font10{
font-size:1.4rem;
line-height:2.5rem;
}
.font12{
font-size:2.0rem;
line-height:3.5rem;
}
.font14{
font-size:2.0rem;
line-height:3.8rem;
}
.font16{
font-size:2.2rem;
}
.title_box{
padding:0px 15px 0px 15px;
}
.section_box{
margin-bottom:80px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
h2{
font-size:2.0rem;
line-height:2.0rem;
font-weight:normal;
}
.font7{
font-size:1.6rem;
line-height:2rem;
}
.font8{
font-size:1.6rem;
line-height:2rem;
}
.font9{
font-size:1.2rem;
line-height:2rem;
}
.font10{
font-size:1.8rem;
line-height:2rem;
}
.font12{
font-size:1.9rem;
line-height:2.8rem;
}
.font14{
font-size:2rem;
line-height:3.4rem;
}
.font16{
font-size:1.8rem;
}
.title_box{
padding:0px 0px 0px 0px;
}
.section_box{
margin-bottom:60px;
}
}
.contents{
margin-top:100px;
}
.contents2{
margin-top:100px;
}
@media screen and (min-width: 0px) and (max-width:767px){
.contents2{
margin-top:50px;
}
}
/*--------------------------------------------------
* 対応エリア
*--------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width:767px){
.area_section{
margin-top:-80px;
}
}
.area_section img{
width:auto;
height:auto;
}
.area_section img.img_area_kasumi{
vertical-align: middle;
}
@media screen and (min-width: 768px) and (max-width:991px){
.area_section img.img_area_kasumi{
max-width:220px;
width:80%;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.area_section img.img_area_kasumi{
max-width:180px;
width:60%;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.area_section img.img_area_kasumi{
max-width:160px;
width:40%;
}
}
/*--------------------------------------------------
* 遺品整理
*--------------------------------------------------*/
.ihin_section img{
width:auto;
}
.ihin_section .title_box h2{
background: url(../img/h2_company_bg.gif) repeat-x center bottom;
padding-bottom:25px;
margin-bottom:60px;
}
.ihin_section .ihin_box{
/* padding:0px 100px 0px 100px; */
}
.ihin_section .ihin_box .list{
color:#004634;
background: url(../img/ihin_list_bg.png) no-repeat right top;
background-size: contain;
}
.ihin_section .ihin_box ul li{
background: url(../img/ihin_list_icon.png) no-repeat 0 14px;
background-size: 20px auto;
padding-left:30px;
text-shadow:1px 1px 0 #fff;
}
.ihin_section .ihin_box hr{
border:none;
background: url(../img/h2_ihin_bg.gif) repeat-x center bottom;
padding-top:25px;
margin-bottom:50px;
}
.ihin_section .ihin_tyui{
border:solid 3px #C21324;
padding:15px 100px 15px 100px;
}
.ihin_section .ihin_index{
background-color: #2E47A7;
border-radius: 10px;
padding:15px 0px;
text-align:center;
color:#F6C034;
margin-bottom:20px;
line-height:3rem;
}
@media screen and (min-width: 768px) and (max-width:991px){
.ihin_section .ihin_box{
padding:0px 80px 0px 80px;
}
.ihin_section .ihin_tyui{
border:solid 3px #C21324;
padding:15px 80px 15px 80px;
}
.ihin_section .ihin_index{
padding:15px 0px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.ihin_section .ihin_box{
padding:0px 40px 0px 40px;
}
.ihin_section .ihin_box ul li{
background: url(../img/ihin_list_icon.png) no-repeat 0 10px;
background-size: 15px auto;
padding-left:24px;
}
.ihin_section .ihin_tyui{
border:solid 3px #C21324;
padding:15px 40px 15px 40px;
}
.ihin_section .ihin_index{
padding:10px 0px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.ihin_section .ihin_box{
padding:0px 0px 0px 0px;
}
.ihin_section .ihin_box .list{
color:#004634;
background: url(../img/ihin_list_bg.png) no-repeat right bottom;
background-size: 25% auto;
}
.ihin_section .ihin_box ul li{
background: url(../img/ihin_list_icon.png) no-repeat 0 10px;
background-size: 13px auto;
padding-left:19px;
}
.ihin_section .sp_bg-mask {
height: 100%;
background: rgba(255,255,255,0.7);
}
.ihin_section .ihin_tyui{
border:solid 3px #C21324;
padding:15px 20px 15px 20px;
}
.ihin_section .ihin_index{
padding:10px 0px;
}
}
/*--------------------------------------------------
* 特殊清掃
*--------------------------------------------------*/
.special_section img{
width:auto;
}
.special_section img.img_special_message{
width:100%;
}
.special_section .title_box h2{
background: url(../img/h2_aqua_bg.gif) repeat-x center bottom;
padding-bottom:25px;
margin-bottom:60px;
}
.special_section .special_box{
/* padding:0px 100px 0px 100px; */
}
/* .special_section .message ul.table{
display:table;
width:100%;
}
.special_section .message ul.table > li{
display:table-cell;
width:auto;
vertical-align: top;
padding: 0px 5px 0px 5px;
text-shadow:1px 1px 0 #fff;
}
.special_section .message ul.table > li:first-child{
width:40%;
} */
.special_section .message ul.table{
display:block;
padding-left:0px;
}
.special_section .message ul.table > li:first-child{
display:none;
}
.special_section .message ul.table > li{
display:block;
width:100%;
}
.special_section .message ul.list li{
background: url(../img/special_list_icon.png) no-repeat 0 8px;
background-size: 18px auto;
padding-left:30px;
color:#392296;
}
/* 2021/10/12 renew add */
.special_section .message{
background: url(../img/special_message_bg.png) no-repeat left top;
background-size: auto;
background-position: 0 100px;
}
.special_section .sp_bg-mask {
height: 100%;
}
.special_section .message ul.table{
display:block;
padding-left: 0px;
/* padding-left:350px; */
}
.special_section .message ul.table > li:first-child{
display:none;
}
.special_section .message ul.table > li{
display:block;
width:100%;
}
@media screen and (min-width: 768px) and (max-width:991px){
.special_section .sp_bg-mask {
background: rgba(255,255,255,0.7);
}
.special_section .message ul.table{
padding-left:0px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.special_section .special_box{
padding:0px 40px 0px 40px;
}
.special_section .message{
background: url(../img/special_message_bg.png) no-repeat left top;
background-size: contain;
}
.special_section .sp_bg-mask {
height: 100%;
background: rgba(255,255,255,0.7);
}
.special_section .message ul.table{
display:block;
padding-left:0px;
}
.special_section .message ul.table > li:first-child{
display:none;
}
.special_section .message ul.table > li{
display:block;
width:100%;
}
.special_section .message ul.list li{
background: url(../img/special_list_icon.png) no-repeat 0 8px;
background-size: 13px auto;
padding-left:20px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.special_section .special_box{
padding:0px 0px 0px 0px;
}
.special_section .message ul.table{
display:block;
padding-left:0px;
}
.special_section .message ul.table > li:first-child{
display:none;
}
.special_section .message ul.table > li{
display:block;
width:100%;
}
.special_section .message ul.list li{
background: url(../img/special_list_icon.png) no-repeat 0 8px;
background-size: 9px auto;
padding-left:13px;
}
.special_section .sp_bg-mask {
height: 100%;
background: rgba(255,255,255,0.7);
}
}
.special_section .baikyaku ul.table{
display:table;
width:100%;
}
.special_section .baikyaku ul.table > li{
display:table-cell;
width:auto;
vertical-align: middle;
padding: 0px 10px 0px 10px;
text-shadow:1px 1px 0 #fff;
}
.special_section .baikyaku ul.table > li:first-child{
width:38%;
text-align:right;
}
.special_section .baikyaku ul.table > li:first-child img{
max-width:100px;
}
.special_section .baikyaku ul.list li{
background: url(../img/special_baikyaku_icon.png) no-repeat 0 14px;
background-size: 20px auto;
padding-left:30px;
color:#392296;
}
@media screen and (min-width: 768px) and (max-width:991px){
.special_section .baikyaku ul.table > li:first-child{
width:20%;
text-align:right;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.special_section .baikyaku ul.table > li:first-child{
width:15%;
text-align:right;
}
.special_section .baikyaku ul.table > li:first-child img{
width:100%;
}
.special_section .baikyaku ul.list li{
background: url(../img/special_baikyaku_icon.png) no-repeat 0 10px;
background-size: 15px auto;
padding-left:24px;
}
.special_section .baikyaku .sp_only{
display:none;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.special_section .baikyaku ul.table{
display:block;
}
.special_section .baikyaku ul.table > li:first-child{
display:none;
}
.special_section .baikyaku ul.table > li{
display:block;
width:100%;
}
.special_section .baikyaku ul.list li{
background: url(../img/special_baikyaku_icon.png) no-repeat 0 10px;
background-size: 13px auto;
padding-left:19px;
}
}
.special_section .special_nagare_table_pc td{
padding-left:10px;
}
.special_section .special_nagare_table_tablet{
display:none;
}
.special_section .special_nagare_table_sp{
display: none;
}
@media screen and (min-width: 576px) and (max-width:991px){
.special_section .special_nagare_table_pc{
display:none;
}
.special_section .special_nagare_table_tablet{
display:table;
background-color: #f3dedf;
padding: 20px 10px;
}
.special_section .special_nagare_table_tablet td{
padding-bottom:15px;
padding-left:10px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.special_section .special_nagare_table_pc{
display:none;
}
.special_section .special_nagare_table_tablet{
display:none;
}
.special_section .special_nagare_table_sp{
display: table;
margin:0px auto;
width:auto;
background-color: #f3dedf;
padding: 20px 5px;
}
.special_section .special_nagare_table_sp td{
padding-bottom:15px;
padding-left:10px;
}
}
/*--------------------------------------------------
* 料金案内
*--------------------------------------------------*/
.price_section .title_box h2{
background: url(../img/h2_price_bg.gif) repeat-x center top;
padding-top:35px;
margin-bottom:25px;
}
.price_section .price_box{
/* padding:0px 65px 0px 65px; */
width:100%;
padding:0px 0px;
}
.price_section .price_index{
background-color: #ED8310;
border-radius: 10px;
padding:15px 0px;
text-align:center;
color:#fff;
margin-bottom:20px;
}
.price_section ul{
/* display:table; */
display: block;
width:100%;
}
.price_section ul li{
/* display:table-cell;
width:50%; */
text-align:center;
padding:0px 15px;
vertical-align: top;
display:block;
width:100%;
}
.price_section img{
width:auto !important;
}
.price_section hr{
border-top:solid 3px #E53E2A;
}
@media screen and (min-width: 768px) and (max-width:991px){
.price_section .price_box{
width:100%;
padding:0px 40px 0px 40px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.price_section .price_box{
width:100%;
padding:0px 15px;
}
.price_section .price_index{
padding:10px 0px;
}
.price_section ul{
display:block;
width:100%;
}
.price_section ul li{
display:block;
width:100%;
text-align:center;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.price_section .price_box{
width:100%;
padding:0px 0px;
}
.price_section .price_index{
padding:10px 0px;
}
.price_section ul{
display:block;
width:100%;
}
.price_section ul li{
display:block;
width:100%;
text-align:center;
}
}
/*--------------------------------------------------
* お問い合わせ
*--------------------------------------------------*/
.contact_section .title_box h2{
background: url(../img/h2_contact_bg.gif) repeat-x center bottom;
padding-bottom:25px;
margin-bottom:25px;
}
.contact_section .contact_box{
/* padding:0px 210px 0px 210px; */
}
.contact_section .tel_box{
width:100%;
margin-bottom:30px;
}
.contact_section .tel_box dt{
background-color: #2E47A7;
padding:25px 0px;
width:100%;
color:#fff;
text-align:center;
}
.contact_section .tel_box dd{
background-color: #99CEF4;
padding:20px 0px;
width:100%;
}
.contact_section .img_contact_freedial{
max-width:360px;
}
.contact_section .img_contact_tel{
max-width:190px;
}
.contact_section .tel_box dd ul{
display:table;
width:100%;
}
.contact_section .tel_box dd ul li:first-child{
display:table-cell;
width:57%;
text-align:center;
vertical-align: middle;
padding:0px 15px 0px 15px;
}
.contact_section .tel_box dd ul li{
display:table-cell;
width:auto;
text-align:center;
vertical-align: middle;
padding:0px 15px 0px 15px;
}
.contact_section .line_box{
display:table;
width:100%;
background-color: #D0E8F8;
padding:20px 0px 20px 0px;
}
.contact_section .line_box li:first-child{
display:table-cell;
width:78%;
padding:0px 15px 0px 15px;
}
.contact_section .line_box li{
display:table-cell;
width:auto;
padding:0px 15px 0px 15px;
vertical-align: middle;
text-align:center;
}
.contact_section .img_contact_line{
max-width:500px;
}
.contact_section .img_contact_qr{
max-width:90px;
}
.contact_section table{
width:100%;
margin-bottom:20px;
}
.contact_section table th{
width:30%;
font-weight:normal;
text-align:left;
padding:0px 0px 0px 30px;
vertical-align: top;
}
.contact_section table td{
width:auto;
text-align:left;
vertical-align: top;
padding:0px 30px 5px 0px;
}
@media screen and (min-width: 768px) and (max-width:991px){
.contact_section .contact_box{
/* padding:0px 150px 0px 150px; */
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.contact_section .contact_box{
padding:0px 50px 0px 50px;
}
.contact_section .tel_box dt{
padding:20px 0px;
}
.contact_section .tel_box dd{
padding:15px 0px;
}
.contact_section table th{
padding:0px 0px 0px 20px;
}
.contact_section table td{
padding:0px 20px 5px 0px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.contact_section .contact_box{
padding:0px 0px 0px 0px;
}
.contact_section .tel_box dt{
padding:15px 0px;
}
.contact_section .tel_box dd{
padding:10px 0px;
}
.contact_section .tel_box dd ul{
display:block;
width:100%;
}
.contact_section .tel_box dd ul li{
display:block;
width:100%;
}
.contact_section .tel_box dd ul li:first-child{
padding-bottom:20px;
}
.contact_section .line_box{
display:block;
width:100%;
}
.contact_section .line_box li:first-child{
padding-bottom:20px;
}
.contact_section .line_box li{
display:block;
width:100%;
}
.contact_section table{
width:100%;
}
.contact_section table th{
display: block;
width:100%;
padding:0px;
}
.contact_section table td{
display: block;
width:100%;
padding:0px 0px 20px 0px;
}
}
.screen-reader-response{
text-align:center;
color:#088A08;
font-weight: bold;
margin-bottom:10px;
}
.wpcf7-not-valid-tip{
color:#E85597;
font-size:1.4rem !important;
line-height:1.4rem !important;
margin-top:5px;
margin-bottom:-10px;
}
.wpcf7-mail-sent-ok{
text-align:center;
border: none !important;
font-size:1.4rem !important;
line-height:1.4rem !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors{
text-align:center;
color:#FF0000;
font-weight: bold;
margin-bottom:10px;
font-size:1.4rem !important;
line-height:1.4rem !important;
}
div.wpcf7-validation-errors{
border: none !important;
}
.wpcf7c-elm-step2{
margin-bottom:20px;
}
/*------------------------------
* 1100px以上
*----------------------------*/
@media screen and (min-width: 1100px){
/*------------------------------
* コンタクトフォームのボタンのデザイン
*----------------------------*/
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
background-color:#E85597;
padding:10px 20px 10px 20px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#fff;
margin-left:10px;
margin-right:10px;
}
.wpcf7-submit:hover,
.wpcf7-confirm:hover,
.wpcf7-back:hover{
background-color:#E8567C;
}
#wpcf7-modify{
background-color:#E85597;
padding:10px 80px 10px 80px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-right:30px;
color:#fff;
}
.wpcf7-submit:hover,
#wpcf7-modify:hover{
cursor: pointer;
}
}
/*------------------------------
* 768px～1099px
*----------------------------*/
@media screen and (min-width: 768px) and (max-width: 1099px){
/*------------------------------
* コンタクトフォームのボタンのデザイン
*----------------------------*/
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
background-color:#E85597;
padding:10px 20px 10px 20px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#fff;
margin-left:10px;
margin-right:10px;
}
.wpcf7-submit:hover,
.wpcf7-confirm:hover,
.wpcf7-back:hover{
background-color:#E8567C;
}
#wpcf7-modify{
background-color:#E85597;
padding:10px 80px 10px 80px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-right:30px;
color:#fff;
}
.wpcf7-submit:hover,
#wpcf7-modify:hover{
cursor: pointer;
}
}
/*------------------------------
* 767px以下
*----------------------------*/
@media screen and (min-width: 0px) and (max-width: 767px){
/*------------------------------
* コンタクトフォームのボタンのデザイン
*----------------------------*/
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
background-color:#E85597;
padding:6px 20px 6px 20px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#fff;
margin-left:10px;
margin-right:10px;
}
.wpcf7-submit:hover,
.wpcf7-confirm:hover,
.wpcf7-back:hover{
background-color:#E8567C;
}
#wpcf7-modify{
background-color:#E85597;
padding:10px 30px 10px 30px;
border:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-right:30px;
color:#fff;
}
.wpcf7-submit:hover,
#wpcf7-modify:hover{
cursor: pointer;
}
}
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
font-size:2.4rem;
line-height:3rem;
}
@media screen and (min-width: 768px) and (max-width:991px){
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
font-size:2.2rem;
line-height:2.8rem;
}
.wpcf7-not-valid-tip,.wpcf7-validation-errors,.wpcf7-mail-sent-ok{
font-size:1.4rem !important;
line-height:1.4rem !important;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
font-size:2.0rem;
line-height:2.7rem;
}
.wpcf7-not-valid-tip,.wpcf7-validation-errors,.wpcf7-mail-sent-ok{
font-size:1.3rem !important;
line-height:1.3rem !important;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.wpcf7-submit,
.wpcf7-confirm,
.wpcf7-back{
font-size:1.4rem;
line-height:2rem;
}
.wpcf7-not-valid-tip,.wpcf7-validation-errors,.wpcf7-mail-sent-ok{
font-size:1.2rem !important;
line-height:1.2rem !important;
}
}
/*--------------------------------------------------
* 個人情報保護方針
*--------------------------------------------------*/
.privacy_section h3{
background-color: #105DB6;
padding:15px 20px 15px 20px;
font-size:2.0rem;
line-height:2.0rem;
font-weight: normal;
color:#fff;
margin-bottom:25px;
}
.privacy_section .privacy_box{
padding:0px 65px 0px 65px;
}
.privacy_section .article{
padding-left:24px;
}
.privacy_section .article > li{
list-style-type: decimal;
}
.privacy_section .list > li{
list-style-type: disc;
}
@media screen and (min-width: 768px) and (max-width:991px){
.privacy_section .article{
padding-left:24px;
}
.privacy_section .privacy_box{
padding:0px 40px 0px 40px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.privacy_section h3{
padding:15px 20px 15px 20px;
font-size:1.8rem;
line-height:1.8rem;
margin-bottom:20px;
}
.privacy_section .article{
padding-left:24px;
}
.privacy_section .privacy_box{
padding:0px 15px 0px 15px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.privacy_section h3{
padding:10px 15px 10px 15px;
font-size:1.6rem;
line-height:1.6rem;
margin-bottom:15px;
}
.privacy_section .article{
padding-left:24px;
}
.privacy_section .privacy_box{
padding:0px 0px 0px 0px;
}
}
/*--------------------------------------------------
* 会社概要
*--------------------------------------------------*/
.company_section .title_box h2{
background: url(../img/h2_company_bg.gif) repeat-x center bottom;
padding-bottom:25px;
margin-bottom:60px;
}
.company_section .company_box{
width:100%;
padding:0px 30px;
}
.company_section table{
width:100%;
}
.company_section table th{
width:26%;
font-weight:normal;
text-align:left;
padding:0px 0px 40px 0px;
}
.company_section table td{
width:auto;
text-align:left;
}
@media screen and (min-width: 768px) and (max-width:991px){
.company_section .company_box{
width:100%;
padding:0px 30px;
}
}
@media screen and (min-width: 576px) and (max-width:767px){
.company_section .company_box{
width:100%;
padding:0px 30px;
}
}
@media screen and (min-width: 0px) and (max-width:575px){
.company_section .company_box{
width:100%;
padding:0px 0px;
}
.company_section table{
width:100%;
display:block;
}
.company_section table th{
width:100%;
display:block;
padding:0px 0px 5px 0px;
}
.company_section table td{
width:100%;
display:block;
padding:0px 0px 30px 0px;
}
}
/*--------------------------------------------------
* ブログ
*--------------------------------------------------*/
.blog_section img{
width:auto;
}
.blog_section .title_box h2{
background: url(../img/h2_company_bg.gif) repeat-x center bottom;
padding-bottom: 25px;
margin-bottom: 60px;
}
.blog_section div.col-12{
/* overflow: auto;*/
}
.blog-list li {
color: #0073aa;
list-style: none;
margin-left:80px;
margin-right:80px;
padding: 10px 20px;
display: block;
border-bottom: 1px dotted #2778bd;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-list a {color: #0073aa;display: block;}
.blog-list a:visited {color: #0073aa;}
.blog-list a:hover {color: #0073aa;text-decoration:none;}
.blog-list li:hover {background: #d2eaff;}
.blog_pc_none{display:none;}
.blog-btn{
margin-top:50px;
margin-bottom:70px;
}
.blog-btn a:visited {color: #ffffff;}
.blog-btn a:hover {color: #ffffff;text-decoration:none;opacity:70%;}
.blog-btn a {
color: #ffffff;
background-color: #4853a2;
padding: 15px 100px 15px 100px;
margin-top:30px;
margin-bottom:30px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.page_blog, .single_blog{
/* margin-top:80px;*/
margin-bottom:50px;
}
.blog_breadcrumb{
margin-bottom:30px;
}
.blog_breadcrumb, .blog_main{
width:90%;
}
.breadcrumb {
font-size:16px;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li {
display: inline;/*横に並ぶように*/
list-style: none;
}
.breadcrumb li:after {/* >を表示*/
content: '>';
padding: 0 0.2em;
color: #555;
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
color: #52b5ee;/*色*/
}
.breadcrumb li a:hover {
text-decoration: underline;
}
.pagedate{
font-size: 14px;
font-weight: normal;
text-align: left;
padding: 0 0 0 0;
margin: 0 0 -10px 0;
color: #555;
letter-spacing: 0.02em;
}
.blog-title{
font-size: 24px;
line-height: 140%;
font-weight: bold;
color: #333;
margin: 20px 0px 20px 0px;
padding: 18px 0px 15px 0px;
border-top: 3px double #ccc;
border-bottom: 1px solid #ccc;
}
.single-contents {
margin: 0 0 70px 0;
}
.single-contents p{
font-size:18px;
line-height: 3rem;
margin-bottom: 0.3em;
}
.single-contents h1{font-size:3em;margin-bottom:0.3em}
.single-contents h2{font-size:2.5em;margin-bottom:0.3em}
.single-contents h3{font-size:2em;margin-bottom:0.3em}
.single-contents h4{font-size:18px;margin-bottom:0.3em}
.single-contents h5{font-size:1.33em;margin-bottom:0.3em}
@media screen and (min-width: 0px) and (max-width:767px){
.blog_pc_none{display:block;}
.blog-list li {
margin-left:20px;
margin-right:20px;
}
.blog_breadcrumb, .blog_main{
width:96%;
}
}
/* ins 20200411 blog str */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
#prevnext {
font-size:14px;
line-height:1.8;
margin:20px 0px;
padding: 10px;
list-style: none;
border-top:1px #ddd solid;
}
#prevnext .prev {
float:left;
}
#prevnext .next {
float:right;
}
.blog_Image_list{
padding:20px 5px 20px 5px;
}
.blog_Image_list img{
padding:2px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-3, .col-4, .col-9, .col-12{
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-3{
/* -ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%; */
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
/* -ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%; */
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-9{
/* -ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%; */
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-12{
/* -ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; */
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.blog-list img{
display: block;
margin:0 auto;
height: auto;
}
.blog_img img{
display: block;
margin:0 auto 15px;
height: auto;
}
.backnumber_title{
font-size: 21px;
color: #ffffffff;
background-color: #076bae;
padding: 15px 8px 12px;
margin-bottom: 20px;
}
.monthly-list{
font-size:18px;
}
.monthly-list li{
padding-bottom:10px;
}
.blog_title{
font-size: 18px;
font-weight: normal;
line-height: 22px;
margin: 5px auto;
}
.blog_st_contents{
font-size: 16px;
color:#000000;
}
.pc_display{
display:block;
}
.sm_display{
display:none;
}
#fixed_menu {
position: fixed; /* 要素の位置を固定する */
top: 30px; /* 基準の位置を画面の一番下に指定する */
right: 0; /* 基準の位置を画面の一番右に指定する */
z-index: 999;
}
#fixed_menu_sm{
position: fixed;
z-index: 999;
bottom: 0;
top: unset;
margin: 0 auto;
width: 100%;
}
#fixed_menu_sm a{
width: 80%;
margin: 0 auto;
}
#fixed_menu_sm a p{
width: 50%;
padding: 10px;
font-size: 18px;
color: #ffffffff;
text-align: center;
display: block;
float: left;
}
.fixed_menu_sm1{
background-color: rgba(232,86,124,0.8);/*E8567C*/
border-radius: 10px 0px 0px 0px;
}
.fixed_menu_sm2{
background-color: rgba(88,179,49,0.8);/*58B331*/
border-radius: 0px 10px 0px 0px;
}
.fixed_menu_sm3{
width: 100%!important;
background-color: rgba(227,90,36,0.8);/*e35a24*/
border-radius: 0px 0px 10px 10px;
}
.contact_24{
margin: 20px 0px 30px;
text-align: center;
font-size: 36px;
color: red;
padding: 19px;
line-height: 110%;
}
/*--------------------------------------------------
* 対応エリア
*--------------------------------------------------*/
.area_box{
width:100%;
padding:0px 120px 20px 120px;
}
.area_image{
display:block;
margin:0 auto;
max-width:100%;
width:100%;
}
@media (max-width: 1030px){
.contact_24{
margin-left:0;
margin-right:0;
}
}
@media (max-width: 767px){
.col-3, .col-4, .col-9{
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pc_display{
display:none;
}
.sm_display{
display:block;
}
.contact_24{
font-size:28px;
}
.area_box{
padding:0px;
}
}
/* トップアコーディオン */
.accordion-container {
position: relative;
width: 100%;
border: 1px solid #0079c1;
border-top: none;
outline: 0;
cursor: pointer
}
.accordion-container .accordion-title {
display: block;
position: relative;
margin: 0;
padding: 0.625em 0.625em 0.625em 2em;
font-size: 1em;
font-weight: normal;
cursor: pointer;
border-top: 1px solid #0079c1;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
background-color: #c1e0ff;
}
.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
color: white;
}
.accordion-title{
position: relative;
border-top: 2px solid #ae292b;
font-weight: normal;
}
.accordion-title span{
font-size: 22px;
color: #ffffff;
background: #964c89;
height: 48px;
width: 52px;
border-radius: 50%;
-moz-border-radius: 50%;
float: left;
padding-left: 5px;
padding-top: 15px;
}
.accordion-title p{
font-size: 22px;
padding: 15px 0px 15px 64px;
}
.accordion-title:after {
content: "";
position: absolute;
right: 20px;
top: 20%;
transition: all 0.2s ease-in-out;
display: block;
width: 20px;
height: 20px;
border-top: solid 2px #000;
border-right: solid 2px #000;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-end{
border-bottom: 2px solid #ae292b;
}
.accordion-bordernone{
border-top:none!important;
}
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-content {
display: none;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2.3125em;
padding-right: 2.3125em;
border-top: 2px solid #ae292b;
font-size: 22px;
background-color:#cbcccc;
line-height: 28px;
}
/* CSS for CodePen */
.accordion-container {
margin: 0.875em auto 1.875em;
}
@media (max-width: 767px){
.accordion-title p{
font-size: 16px;
padding: 10px 0px 10px 45px;
}
.accordion-title span{
font-size: 16px;
color: #ffffff;
height: 40px;
width: 40px;
padding-left: 7px;
padding-top: 12px;
}
.accordion-content {
font-size: 16px;
line-height: 28px;
}
.accordion-title {
padding-right: 23px;
padding-left: 5px;
}
.accordion-title:after {
right: 10px;
top: 30%;
width: 10px;
height: 10px;
}
}
/* ins 20200411 blog end */
/* ins 20211011 renew start */
.ihin_support_img{
margin-top:50px;
padding-right:20px;
float:left;
}
.ihin_support{
margin-top:50px;
font-size: 2rem;
line-height: 3rem;
}
.ihin_support_blue{
margin-top:20px;
display: inline-block;
color:blue;
font-size: 1.8rem;
line-height: 2.8rem;
}
.ihin_support_hr{
background: url(../img/h2_aqua_bg.gif) repeat-x center bottom!important;
margin-top: 50px!important;
margin-bottom: 0px!important;
}
.company_certification h3{
font-size:3rem;
text-align:center;
margin-top:60px;
}
.company_certification img{
width:auto;
display:block;
margin:30px auto 0;
}
.company_certification_hr, .special_special_hr{
border: none;
background: url(../img/h2_aqua_bg.gif) repeat-x center bottom!important;
margin-top: 50px;
margin-bottom: 0px;
padding-top: 25px;
}
.special_nagare_message{
background-color:#325829;
color:#ffffff;
font-size:1.5rem;
border-radius: 5px;
padding:15px 20px;
}
.price_senior{
background-color: #0071ae;
color: #ffffff;
border-radius: 30px;
padding: 7px;
font-size: 3.2rem;
width: 40%;
margin: 40px auto 20px;
}
.price_annotation{
/* margin-left:130px; */
}
.price_senior_annotation{
/* margin-left:180px; */
}
.information_area h2{
color:#89252a;
}
.fontinformation{
font-size:2.0rem;
line-height:3rem;
}
.information_list{
list-style: none;
display: block;
}
.information_list li{
list-style: none;
padding: 10px 20px 20px;
display: block;
}
.information_list2{
text-indent: -180px!important;
padding-left: 200px!important;
}
.infomation_more{
padding-right:20px;
color:#000000;
display: block;
text-align: right;
}
.infomation_more:hover {
color:#000000;
text-decoration: underline;
}
.infomation_more p{
display: inline-block;
text-align: right;
}
.more_tringle{
margin-left:10px;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 10px;
border-color: transparent transparent transparent #000000;
}
@media (min-width: 1000px){
.price_section ul li {
padding: 0px 10px;
}
.price_section ul li p{
font-size: 1.2rem;
}
}
@media (max-width: 1040px){
.price_annotation{
margin-left:0px;
text-align:center;
}
.price_senior_annotation{
margin-left:0px;
text-align:center;
}
}
@media (max-width: 767px){
.ihin_support{
font-size: 1.6rem;
}
.ihin_support_blue{
font-size: 1.6rem;
}
.company_certification h3{
font-size:1.8rem;
}
.price_senior{
width: 60%;
}
.price_annotation{
text-align:left;
}
.price_senior_annotation{
text-align:left;
}
.select ul {
padding-left: 10px;
padding-right: 10px;
}
.information_area h2 {
font-size: 2.8rem;
}
.fontinformation{
font-size: 1.8rem;
line-height: 2.5rem;
}
.information_list li{
margin-left: 0px;
margin-right: 0px;
padding-top:0px;
}
.information_list2{
text-indent: 0px!important;
padding-left: 10px!important;
}
}
/*-- 対応エリア テキスト化 --*/
.area_content01 {
text-align: center;
}
.area_content01 p {
text-align: center;
}
.fc_red {
color: #CA2E22;
}
.fc_green {
color: #6CA230;
}
.fc_blue {
color: #318CC3;
}
.fc_orange {
color: #DD8322;
}
.fc_purple {
color: #a922dd;
}
.fc_aichi {
color: #f69bd2;
}
.fc_gifu {
color: #efc300;
}
.fc_mie {
color: #9695e6;
}
.fc_shiga {
color: #14b9f9;
}
.fc_shizuoka {
color: #78d378;
}
.fc_nagano {
color: #09d8ce;
}
/* 全体 */
/*-----------------------------
text_style, box_style
-----------------------------*/
/*スマホ向けレイアウトの指定*/
.fs_10_vw{ font-size: 2.667vw;}
.fs_12_vw{ font-size: 3.2vw;}
.fs_14_vw{ font-size: 3.733vw;}
.fs_16_vw{ font-size: 4.267vw;}
.fs_18_vw{ font-size: 4.8vw;}
.fs_20_vw{ font-size: 5.333vw;}
.fs_24_vw{ font-size: 6.4vw;}
.fs_30_vw{font-size: 8vw;}
.fs_40_vw{font-size: 10.677vw;}
.fs_12_sp { font-size: 12px; }
.fs_14_sp { font-size: 14px; }
.fs_16_sp { font-size: 16px; }
.fs_18_sp { font-size: 18px; }
.fs_20_sp { font-size: 20px; }
.fs_22_sp { font-size: 22px; }
.fs_24_sp { font-size: 24px; }
.fs_30_sp { font-size: 30px; }
.fs_36_sp { font-size: 36px; }
.fs_40_sp { font-size: 40px; }
.fs_50_sp { font-size: 50px; }
.fs_80_sp { font-size: 80px; }
.fs_150_sp {font-size: 150%; }
.fs_200_sp { font-size: 200%; }
.fs_250_sp { font-size: 250%; }
.fs_120_sp { font-size: 120%; }
.fw_normal{ font-weight: 400;}
.fw_bold { font-weight: 700; }
.fw_black { font-weight: 900; }
.ta_center_sp { text-align: center; }
.ta_left_sp { text-align: left; }
.ta_right_sp { text-align: right; }
.lh_10 { line-height: 1; }
.lh_12 { line-height: 1.2; }
.lh_13 { line-height: 1.3; }
.lh_14 { line-height: 1.4; }
.lh_15 { line-height: 1.5; }
.lh_17 {line-height: 1.7;}
.lh_25 { line-height: 2.5; }
.ls_005 {letter-spacing: 0.05em;}
.ls_01 {letter-spacing: 0.1em;}
.ls_015 {letter-spacing: 0.15em;}
.fc_black {color: #2D2D2C;}
.fc_pink {color: #F35994;}
.fc_pink02 {color: #EC81AA;}
.fc_white {color: #FFFFFF;}
.under_line_pink {background: linear-gradient(transparent 60%, #FDDFEA 60%);}
.mb0_sp { margin-bottom: 0; }
.mb10_sp { margin-bottom: 0.625rem; }
.mb20_sp { margin-bottom: 1.25rem; }
.mb30_sp { margin-bottom: 1.875rem; }
.mb40_sp { margin-bottom: 2.5rem; }
.mb50_sp { margin-bottom: 3.125rem}
.mb60_sp { margin-bottom: 3.75rem; }
.mb80_sp { margin-bottom: 5rem; }
.mb100_sp { margin-bottom: 6.25rem; }
.mb200_sp { margin-bottom: 12.5rem; }
.mb300_sp { margin-bottom: 18.75rem; }
.mt10_sp { margin-top: 0.625rem; }
.mt20_sp { margin-top: 1.25rem; }
.mt30_sp { margin-top: 1.875rem; }
.mt40_sp { margin-top: 2.5rem; }
.mt60_sp { margin-top: 3.75rem; }
.mt80_sp { margin-top: 5rem; }
.mt100_sp { margin-top: 6.25rem; }
.ml10_sp { margin-left: 0.625rem; }
.ml20_sp { margin-left: 1.25rem; }
.ml30_sp { margin-left: 1.875rem; }
.ml40_sp { margin-left: 2.5rem; }
.ml60_sp { margin-left: 3.75rem; }
.ml100_sp { margin-left: 6.25rem; }
.mr10_sp { margin-right: 0.625rem; }
.mr20_sp { margin-right: 1.25rem; }
.mr30_sp { margin-right: 1.875rem; }
.mr40_sp { margin-right: 2.5rem; }
.mr60_sp { margin-right: 3.75rem; }
.mr100_sp { margin-right: 6.25rem; }
.img_responsive {
max-width: 100%;
height: auto;
}
.word_wrap {
word-wrap: break-word;
}
.only_sp { display: block; }
.only_tb { display: none; }
.only_pc { display: none; }
.only_sptb { display: block; }
.only_tbpc { display: none; }
/*タブレットレイアウトの指定*/
@media print, screen and (min-width:820px){
.fs_12_tb { font-size: 12px; }
.fs_14_tb { font-size: 14px; }
.fs_16_tb { font-size: 16px; }
.fs_18_tb { font-size: 18px; }
.fs_20_tb { font-size: 20px; }
.fs_24_tb { font-size: 24px; }
.fs_30_tb { font-size: 30px; }
.fs_34_tb { font-size: 34px; }
.fs_40_tb { font-size: 40px; }
.fs_50_tb { font-size: 50px; }
.fs_80_tb { font-size: 80px; }
.ta_center_tb { text-align: center; }
.ta_left_tb { text-align: left; }
.ta_right_tb { text-align: right; }
.only_sp { display: none; }
.only_tb { display: block; }
.only_pc { display: none; }
.only_sptb { display: block; }
.only_tbpc { display: block; }
.mb0_tb { margin-bottom: 0; }
.mb10_tb { margin-bottom: 0.625rem; }
.mb20_tb { margin-bottom: 1.25rem; }
.mb30_tb { margin-bottom: 1.875rem; }
.mb40_tb { margin-bottom: 2.5rem; }
.mb50_tb { margin-bottom: 3.125rem}
.mb60_tb { margin-bottom: 3.75rem; }
.mb80_tb { margin-bottom: 5rem; }
.mb100_tb { margin-bottom: 6.25rem; }
.mb200_tb { margin-bottom: 12.5rem; }
.mb300_tb { margin-bottom: 18.75rem; }
.mt10_tb { margin-top: 0.625rem; }
.mt20_tb { margin-top: 1.25rem; }
.mt30_tb { margin-top: 1.875rem; }
.mt40_tb { margin-top: 2.5rem; }
.mt60_tb { margin-top: 3.75rem; }
.mt100_tb { margin-top: 6.25rem; }
.ml10_tb { margin-left: 0.625rem; }
.ml20_tb { margin-left: 1.25rem; }
.ml30_tb { margin-left: 1.875rem; }
.ml40_tb { margin-left: 2.5rem; }
.ml60_tb { margin-left: 3.75rem; }
.ml100_tb { margin-left: 6.25rem; }
.mr10_tb { margin-right: 0.625rem; }
.mr20_tb { margin-right: 1.25rem; }
.mr30_tb { margin-right: 1.875rem; }
.mr40_tb { margin-right: 2.5rem; }
.mr60_tb { margin-right: 3.75rem; }
.mr100_tb { margin-right: 6.25rem; }
}
/*PC向けおよび大型PCの指定*/
@media print, screen and (min-width:1020px){
.fs_12_pc { font-size: 12px; }
.fs_14_pc { font-size: 14px; }
.fs_16_pc { font-size: 16px; }
.fs_18_pc { font-size: 18px; }
.fs_20_pc { font-size: 20px; }
.fs_24_pc { font-size: 24px; }
.fs_30_pc { font-size: 30px; }
.fs_34_pc { font-size: 34px; }
.fs_40_pc { font-size: 40px; }
.fs_50_pc { font-size: 50px; }
.fs_70_pc { font-size: 70px; }
.fs_80_pc { font-size: 80px; }
.ta_center_pc { text-align: center; }
.ta_left_pc { text-align: left; }
.ta_right_pc { text-align: right; }
.only_sp { display: none; }
.only_tb { display: none; }
.only_pc { display: block; }
.only_sptb { display: none; }
.only_tbpc { display: block; }
.mb0_pc { margin-bottom: 0; }
.mb10_pc { margin-bottom: 0.625rem; }
.mb20_pc { margin-bottom: 1.25rem; }
.mb30_pc { margin-bottom: 1.875rem; }
.mb40_pc { margin-bottom: 2.5rem; }
.mb50_pc { margin-bottom: 3.125rem}
.mb60_pc { margin-bottom: 3.75rem; }
.mb80_pc { margin-bottom: 5rem; }
.mb100_pc { margin-bottom: 6.25rem; }
.mb200_pc { margin-bottom: 12.5rem; }
.mb300_pc { margin-bottom: 18.75rem; }
.mt10_pc { margin-top: 0.625rem; }
.mt20_pc { margin-top: 1.25rem; }
.mt30_pc { margin-top: 1.875rem; }
.mt40_pc { margin-top: 2.5rem; }
.mt60_pc { margin-top: 3.75rem; }
.mt100_pc { margin-top: 6.25rem; }
.ml10_pc { margin-left: 0.625rem; }
.ml20_pc { margin-left: 1.25rem; }
.ml30_pc { margin-left: 1.875rem; }
.ml40_pc { margin-left: 2.5rem; }
.ml60_pc { margin-left: 3.75rem; }
.ml100_pc { margin-left: 6.25rem; }
.mr10_pc { margin-right: 0.625rem; }
.mr20_pc { margin-right: 1.25rem; }
.mr30_pc { margin-right: 1.875rem; }
.mr40_pc { margin-right: 2.5rem; }
.mr60_pc { margin-right: 3.75rem; }
.mr100_pc { margin-right: 6.25rem; }
}
/*-----------------------------
responsive_grid
-----------------------------*/
/*スマホ向けレイアウトの指定*/
.inner01 {
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.inner02 {
width: 94%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.inner03 {
width: 94%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.inner04 {
width: 94%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.flex_sp {
display: flex;}
.a_items_center{
align-items: center;}
.ju_content_bet{ justify-content:space-between; }
.flex_center{ justify-content: center; }
.flex_02_sp{ width: 48%; }
.flex_sp_03{
width: 32%;
}
.flex_sp_04 {
width: 23%;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
.flex_tb {
display: flex;
}
.flex_tb_01{
width: 60%;
}
.flex_tb_02{
width: 48%;
}
.flex_tb_03{
width: 31%;
}
.flex_tb_04{
width: 23%;
}
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:1080px){
/* .inner01 {
width: 1080px;
}
.inner02 {
width: 1080px;
}
.inner03{
width: 940px;
}
.inner04{
width: 880px;
}
.flex_pc {
display: flex;
}
.flex_pc_02{
width: 48%;
}
.flex_pc_03{
width: 63%;
}
.flex_pc_04{
width: 33%;
}
.flex_pc_05{
width: 60%;
} */
}
/* ハンバーガーメニュー */
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
/* background:#D54884; */
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 5px;
margin: 0 1.25rem 0 auto;
z-index: 9999;
}
/*ボタン内側*/
.openbtn4 span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
height: 2px;
border-radius: 5px;
background: #EC81AA;
width: 40px;
}
.openbtn4 span:nth-of-type(1) {
top:5px;
}
.openbtn4 span:nth-of-type(2) {
top:15px;
}
.openbtn4 span:nth-of-type(3) {
top:25px;
}
.openbtn4 span:nth-of-type(3)::after {
content:"メニュー";/*3つ目の要素のafterにMenu表示を指定*/
position: absolute;
top: 10px;
color: #EC81AA;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
top: 12px;
left: 6px;
transform: translateY(6px) rotate(-45deg);
width: 70%;
}
.openbtn4.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
top: 24px;
left: 6px;
transform: translateY(-6px) rotate(45deg);
width: 70%;
}
.openbtn4.active span:nth-of-type(3)::after {
content:"閉じる";/*3つ目の要素のafterにClose表示を指定*/
transform: translateY(0) rotate(-45deg);
top:13px;
left:11px;
width: 40px;
text-align: center;
font-weight: bold;
}
/*========= ナビゲーションのためのCSS ===============*/
/* 追加カスタム */
.nav_contact {
display: flex;
justify-content: space-evenly;
}
.nav_contact_tel {
width: 80%;
margin: 0 auto;
}
.g-nav-item {
width: 100%;
border-bottom: 1px solid #c7c7c7;
}
.g-nav-item:first-child {
border-top: 1px solid #c7c7c7;
}
/* 追加カスタム */
.g-nav{
/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
position: fixed;
z-index: -1;
display: none;
/*ナビの位置と形状*/
top: 0;
width: 100%;
height: 100vh;/*ナビの高さ*/
background: #fefefe;
/*動き*/
transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
.g-nav.panelactive{
display: block;
z-index:999;
}
/*ナビゲーションの縦スクロール*/
.panelactive .g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
.g-nav ul {
display: none;
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.g-nav.panelactive ul {
display: block;
width: 80%;
}
/*リストのレイアウト設定*/
.g-nav li{
list-style: none;
text-align: center;
}
.g-nav li a{
font-size: 1.7em;
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
.box_header {
display: flex;
margin-top: 10px;
}
.logo_header {
margin-left: 10px;
}
.logo_header img {
width: 200px;
height: auto;
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:768px){
.g-nav.panelactive ul {
width: 600px;
}
.nav_contact {
justify-content: center;
}
.nav_contact li {
width: 150px;
}
.nav_contact_tel {
width: 300px;
}
}
/*メニューをページ下部に固定*/
.sp_fixed_menu {
background-color: #EC81AA;
position: fixed;
width: 100%;
padding: 0.5rem 0 0.3rem 0;
bottom: 0px;
font-size: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
/*メニューを横並びにする*/
.sp_fixed_menu ul{
display: flex;
align-items: flex-end;
list-style: none;
padding:0;
margin:0;
width:100%;
}
.sp_fixed_menu li{
}
/*左側メニューを緑色に*/
.footer_tel {
width: 53%;
}
/*真ん中メニューを緑色に*/
.footer_line {
/* width: 25%; */
}
/*右側メニューをオレンジ色に*/
.footer_mail {
/* width: 25%; */
}
.sp_footer_linemail {
display: flex;
justify-content;
}
/*ボタンを調整*/
.sp_fixed_menu li a{
text-align: center;
display:block;
width: 90%;
margin: auto;
}
.footer_tel a{
}
.footer_tel a img{
width: 100%;
}
.footer_line a{
}
.footer_mail a{
}
/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
.sp_fixed_menu{
display:none;
}
}
/*一覧のページネーション*/
.pagenavi_jisseki {
width: 100%;
}
.pagenavi_jisseki ul {
display: flex;
flex-wrap: nowrap;
justify-content: center;
flex-direction: row;
}
.pagenavi_jisseki nav {
padding: 2rem 0;
}
.pagenavi_jisseki li{
list-style: none;
padding: 0;
margin: 8px 5px;
}
.pagenavi_jisseki a{
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
font-size: 1rem;
font-weight: normal;
letter-spacing: 0px;
color: #EC81AA;
background-color: rgba(0,0,0,0.1);
text-decoration: none;
}
.pagenavi_jisseki a:hover{
color: #000000;
background-color: rgba(0,0,0,0.2)
}
.pagenavi_jisseki span{
background-color: rgba(236,129,170,0.1);
color: #EC81AA;
border: solid 1px rgba(236,129,170,1);
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
font-size: 1rem;
font-weight: normal;
letter-spacing: 0px;
}
/*一覧のページネーションここまで*/
/* PC表示時のヘッダー */
.pc_hero {display: none;} /* sp時 */
@media (min-width: 820px) {
.pc_hero {
display: block;
position: fixed;
width: 24%;
height: 100%;
}
.pc_hero_inner {
/* height: 100%; */
}
.pc_hero_logo {
width: 70%;
margin: 0 auto;
}
}
/**/
.pc_header {display: none;}
@media (min-width: 820px) {
.pc_header {
display: block;
position: fixed;
right: 0;
width: 24%;
height: 100%;
z-index:3;
}
.pc_g-nav ul {
padding: 0 2em 2em;
margin-top: 5em;
}
.pc_g-nav-item {
margin-left: 1em;
text-align: center;
}
.pc_g-nav li a{
font-size: 2em;
color: #333;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
.pc_g-nav li a:hover{
text-decoration: underline;
}
.pc_nav_contact {
display: flex;
justify-content: center;
}
.pc_nav_contact li {
width: 40%;
}
.pc_nav_contact_tel {
width: 80%;
margin: 0 auto;
}
#pc_side_line_btn a,#pc_side_mail_btn a {
padding: 10px 10px 0 10px;
}
}
/* コロナ対策 */
.colona{
text-align: center;
}
.colona img{
margin:0px auto 50px;
}
/* トップページ about */
.top_about {
text-align: center;
}
.top_h2_img{
width: 80%;
}
/* トップページ feature */
.feature_box {
display: block;
border: 1px solid #F35994;
background-color: #FDF3F7;
}
.feature_txt {
text-align: center;
}
.feature_txt img {
margin: 1em;
width: 65%;
height: auto;
}
.feature_txt p {
padding: 0 1em 1em;
}
.feature_title {
padding: 24px 0 0 0;
}
.feature_title_line {
margin: 0 auto;
border: 0;
height: 5px;
width: 80%;
background: linear-gradient(0.25turn, rgba(254, 203, 222, 0.5), rgba(249, 198, 218, 1) 25%, rgba(255, 172, 204, 1) 50%, rgba(249, 198, 218, 1) 75%, rgba(254, 203, 222, 0.5));
}
/* トップページ 基本サービス */
.top_basic_service {
background-color: #FDF3F7;
border-radius: 20px;
text-align: center;
padding: 1em;
}
.top_basic_service img {
width: 90%;
}
.basic_service_title_line {
width: 10%;
height: 2px;
background-color: #F35994;
margin: 0 auto 20px;
}
.basic_service_txt {
display: flex;
justify-content: space-around;
}
.basic_service_txt p {
border: 1px solid #EC81AA;
border-radius: 4px;
background-color: #FFF;
padding: 1.2em;
color: #EC81AA;
width: 48%;
height: 80px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/* トップページ お問い合わせ */
.main_contact {
width: 100%;
height: auto;
background: no-repeat #F7C7DA url("http://stationtest.sakura.ne.jp/site_kasumi_0703/wp-content/themes/kasumi-ihin/img/contact_bg@2x.png");
background-size: 100% auto;
background-blend-mode: multiply;
padding: 0 0 2em;
}
.top_contact {
text-align: center;
}
.top_contact p {
padding: 60px 0 30px 0;
}
.top_contact img {
width: 90%;
}
.top_contact_box {
display: flex;
justify-content: center;
}
.top_contact_box p{
padding: 0.5em 1em;
background-color: #fff;
border-radius: 80px;
border: 1px solid #EC81AA;
margin: 0.2em;
}
.contact_btn a {
display: block;
align-items: center;
margin: 0 auto;
padding: 1em 2em;
transition: 0.3s;
border-radius: 10px;
}
.contact_btn a:hover{
transform: translateY(3px);
text-decoration: none;
}
.contact_btn {
width: 90%;
margin: 0 auto 1.25rem;
}
.contact_btn img {
width: 15%;
}
.contact_btn p {
padding: 1em;
}
.tel_btn a {
background-color: #fff;
box-shadow: 0 5px 0 #D9D2D5;
}
.tel_btn a:hover {
box-shadow: 0 2px 0 #D9D2D5;
}
.mail_btn a {
background-color: #FFAC1D;
box-shadow: 0 5px 0 #CF8609;
}
.mail_btn a:hover {
box-shadow: 0 2px 0 #CF8609;
}
.line_btn a {
background-color: #06C755;
box-shadow: 0 5px 0 #028C3A;
}
.line_btn a:hover {
box-shadow: 0 2px 0 #028C3A;
}
.btn_box {
display: flex;
align-items: center;
justify-content: center;
}
.btn_box p {
padding: 0;
margin-left: 20px;
}
.tel_num p {
margin-left: 10px;
}
#top_linemail_p {
padding: 0;
margin: 40px 0 10px;
}
/*--------------------------------------------------
* メインコンテンツ・サイドメニュー
*--------------------------------------------------*/
.main_container {
padding-top: 60px;
padding-bottom: 30px;
background-color: #fff;
position: relative;
z-index: 999;
}
@media only screen and (min-width: 820px) {
.main_container {
width: 50rem;
left: 0;
right: 0;
border-radius: 5rem;
margin: 3rem auto;
filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
}
}
/*---------------------------
* メイン画像
*--------------------------- */
section.main {
background: none;
}
section.main img {
width:auto;
}
/* 20210906 HP改修のため修正・追加 start */
.credit{
margin: 10px auto;
width: 40%!important;
}
.h2_nayami{
font-size: 24px;
color:#1165a3;
line-height: 130%;
}
.h2_nayami span{
background:linear-gradient(transparent 70%, #ff6 60%);
}
.nayami{
margin-top: 30px;
}
.nayami img{
margin: 0px auto 30px;
display: block;
}
.nayami .row{
margin: 20px 0 60px;
}
.nayami ul{
font-size: 18px;
list-style: unset;
margin-left: 25px;
}
.nayami li{
margin-bottom:10px;
line-height: 120%;
}
.h2_select{
font-size: 29px;
color: #1165a3;
border: 4px solid #1165a3;
padding: 10px 15px 10px;
border-radius: 10px;
line-height: 130%;
}
.h2_select span{
color: #d7291d;
}
.select ul{
font-size: 18px;
list-style: inside;
padding-left:20px;
padding-right:20px;
margin-top:30px;
}
.select li{
margin-bottom:15px;
background-color:#1a8541;
color:#ffffff;
padding: 15px 15px 12px 35px;
line-height: 130%;
text-indent: -25px;
}
.h2_qa{
font-size: 29px;
line-height: 130%;
margin-bottom: 20px;
}
.qa{
margin: 30px auto;
}
.video {
text-align: center;
}
/* 20210906 HP改修のため修正・追加 end */
/* お問い合わせ完了ページ */
.contact_finish_btn {
text-align: center;
font-size: 2em;
text-decoration-line: underline;
}
/* PC表示背景 */
.pcleft{
position: fixed;
z-index: 1;
width: 30%;
height: auto;
top: 50%;
left: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
/*.box_test {
width: 30%;
height: auto;
position: fixed;
z-index: -1;
}*/
.box_banner a img{
width: 100%;
height: auto;
}
.box_banner a:hover{
opacity: 0.7;
}
.box_test img {
width: 100%;
height: auto;
}
/*タブレットレイアウトの指定*/
@media only screen and (min-width:768px){
/* TB,PC表示用背景模様 */
.tbpc_bg {
width: 100%;
height: 101%;
top: -1%;
position: fixed;
background: repeating-linear-gradient(-30deg, rgb(248 228 228) 0, #fad8d8 200px);
z-index: -999;
}
}
/* 会社概要ページ 感謝状 */
.company_award h3 {
font-size: 1.8rem;
text-align: center;
line-height: 1.4;
}
.company_award img {
width: 90%;
height: auto;
margin: 10px auto;
display: block;
}
@media only screen and (min-width:768px){
.company_award h3 {
font-size: 2.4rem;
}
}
/* トップページ-サービス内容 */
.main_service {
width: 100%;
}
.top_service_btn {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: auto;
}
.top_service_btn a {
width: 33.3%;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
text-decoration: none;
color: #333333;
}
.top_service_btn p {
width: 100%;
text-align: center;
padding: 1em 0;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
}
.bg_pink { background-color: #F8B1CC; }
.bg_yellow-green { background-color: #80E4A9; }
.bg_blue { background-color: #9FCFF3; }
.bg_yellow { background-color: #FFEB92; }
.bg_purple { background-color: #CCCCEB; }
.bg_green { background-color: #3EC655; }
/* トップページ-サービス内容-遺品整理 */
.top_service_ihin {
width: 100%;
height: auto;
text-align: center;
padding-bottom: 40px;
}
.main_service h2 {
padding: 1em 0;
}
.top_service_img {
width: 90%;
}
/* リストで使える囲み枠⑤ */
.box19 {
margin: 1em auto 30px;
background: #ffffff; /* 背景色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); /* 影の色 */
border-radius: 1em;
width: 95%;
padding-bottom: 3em;
}
.box19-title {
background: #ffffff; /* タイトル背景色 */
padding: 1em 0;
text-align: center;
color: #000; /* タイトル文字色 */
letter-spacing: 0.05em;
font-size: 20px;
width: 80%;
margin: 0 auto;
}
.box19 p {
margin: 0;
padding: 1em;
}
/* box19用リスト表示 */
ol.list5 {
counter-reset:list;
list-style-type:none;
padding: 5px 15px 2px 15px;
}
ol.list5 li {
position:relative;
padding: 15px 0 6px 50px;
line-height: 25px;
border-bottom: dashed 1px #F6A38B;
font-size: 20px;
}
ol.list5 li:before {
content: url("../img/check.svg");
width: 1.5em;
display: block;
position: absolute;
left: 1px;
}
.work_example {
background-color: #ffffff;
}
.example_ttl {
padding: 2em 0 1em;
}
.txt {
width: 92%;
margin: 0 auto;
padding: 3em 0 0 0;
}
.top_service_box {
width: 94%;
margin: 0 auto 60px;
}
.top_service_box img{
width: 100%;
height: auto;
}
.btn-box button,.btn-box-02 button,.btn-box-03 button,.btn-box-04 button,.btn-box-05 button,.btn-box-06 button {
position: relative;
display: block;
width: 70%;
margin: auto;
padding: 0.8em;
cursor: pointer;
transition: all 0.3s;
text-align: center;
border: none;
border-radius: 20px;
background-color: #fff;
font-size: 20px;
}
.btn-box button:hover,.btn-box-02 button:hover,.btn-box-03 button:hover,.btn-box-04 button:hover,.btn-box-05 button:hover,.btn-box-06 button:hover {
opacity: .6;
}
.more,.more-02,.more-03,.more-04,.more-05,.more-06 {
display: none;
}
.more ul,.more-02 ul,.more-03 ul {
margin: 16px;
padding: 0;
list-style: none;
}
.more.appear,.more-02.appear,.more-03.appear,.more-04.appear,.more-05.appear,.more-06.appear {
display: block;
animation: .5s fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
/* トップページ banner */
.voice_banner a:hover{
filter: opacity(70%);
cursor: pointer;
}
/* トップページ オプションサービス */
.top_option img{
width: 100px;
height: auto;
}
.top_option_item01 img{
width: 160px;
height: auto;
}
.top_option_box{
border: 1px #F35994 solid;
border-radius: 20px;
padding: 30px 15px;
}
/* トップページ 実績 */
.top_works{
background-color: rgba(249,217,230,0.33);
padding: 60px 0;
}
.works_cat p{
padding: 3px 8px;
/*background-color: #bababa;*/
display: inline-block;
margin-bottom: 5px;
border: 1px solid #545454;
color: #545454;
}
/*
.works_cat span{padding: 5px 8px;}
.cat_ihin{ background-color: #FDA7D2;}
.cat_tokusyu{ background-color: #80E4A9;}
.cat_gomi{ background-color: #9FCFF3;}
.cat_seizen{ background-color: #FEF301;}
.cat_akiya{ background-color: #CCCCEB;}
.cat_zanchi{ background-color: #06C755;}
*/
.works_price,.works_floor,.works_time{
padding: 5px 10px;
border-radius: 8px;
}
.works_price{ background-color: #F35994;}
.works_floor,.works_time{ background-color: #3EC655;}
.works_imgitems{
width: 46%;
}
.works_arrow img{
width: 12px;
height: auto;
}
.kaitori_wrap,.works_wrap{
border: 1px solid #2d2d2c;
padding: 30px 20px;
background-color: #fff;
}
/*.toukou:hover{
text-decoration-line: none;
opacity: 0.7;
color:#fff;
background-color: #F8B1CC;
}*/
.kaitori_btn,.works_btn{
display: inline-block;
border: 1px solid #333;
padding: 15px 0;
border-radius: 25px;
color: #333;
width: 250px;
background-color: #fff;
}
.voice_wrap{
border: 1px solid #2d2d2c;
padding: 40px 30px;
background-color: #fff;
border-radius:25px;
}
.voice_items{
padding: 5px;
box-sizing: border-box;
width: 100px;
color: #fff;
background-color: #EC81AA;
}
.works_container,.purchase_container,.voice_container{
position: relative;
}
.works_assess{
width: 70%;
height: auto;
margin-left: auto;
margin-right: auto;
}
/* トップページ 選ばれる理由 */
.top_reason_box{
border: 1px solid #2D2D2C;
padding: 15px 20px;
border-radius: 15px;
}
/* トップページ 遺品整理の流れ */
.top_flow_step{
background-color: #EC81AA;
padding: 10px 15px;
display: inline-block;
}
.top_flow_box{
border: 1px solid #2d2d2c;
border-radius: 15px;
padding: 40px 30px;
box-shadow: 0 5px 2px rgba(0,0,0,0.16);
}
/*トップページ よくあるご質問*/
/*==================================
アコーディオンのためのcss
===================================*/
/*アコーディオン全体*/
.accordion-area{
list-style: none;
width: 96%;
max-width: 800px;
margin:0 auto;
}
.accordion-area section {
border: 2px solid #FDA7D2;
border-radius: 15px;
}
/*アコーディオンタイトル*/
.faq_ttl {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
padding: 3% 50px 5% 5%;
transition: all .5s ease;
align-items: flex-start;
}
.faq_ttl p:first-child,.faq_box p:first-child{margin-right: 8px;}
/*アイコンの＋と×*/
.faq_ttl::before,
.faq_ttl::after{
position: absolute;
content:'';
top:48%;
right: 15px;
width: 15px;
height: 2px;
background-color: #FDA7D2;
}
.faq_ttl::before{ transform: rotate(0deg);}
.faq_ttl::after{ transform: rotate(90deg);}
/* closeというクラスがついたら形状変化 */
.faq_ttl.close::before{transform: rotate(45deg);}
.faq_ttl.close::after{transform: rotate(-45deg);}
/*アコーディオンで現れるエリア*/
.faq_box {
display: none;/*はじめは非表示*/
border-top: 1px solid #C5C5C5;
margin:0 5% 3% 5%;
padding: 3% 0;
}
.faq_ans{
align-items: flex-start;
}
/*トップページ お知らせ*/
.top_info_wrap ul li{
border-bottom: 1px solid #ADADAD;
padding: 10px 0;
}
.top_info_wrap ul li a,.info_box li a{
color:#333333;
}
.top_info_wrap ul li a:hover,.info_box li a:hover{
color:#F35994;
}
/* お知らせ一覧 */
.info_wrap{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.info_box li{
border-bottom: 1px solid #CBC8C8;
padding: 8px 0;
}
.info_pagenavi,.info_pagenavi:hover{
color:#F35994;
}
.page-numbers{
color: #333;
}
.page-numbers:hover,.info_pagenavi .current{
color:#F35994;
}
/* お知らせ詳細 */
.info_ttl{
font-size: 24px;
font-weight: normal;
color: #F35994;
margin: 20px 0;
}
.prevnext {
font-size:16px;
line-height:1.8;
margin:40px 0px;
padding: 10px;
list-style: none;
border-top:1px #ddd solid;
color: #F35994;
}
.prevnext li a{
color: #333;
}
.prevnext li a:hover,.info_back_btn:hover{
color: #F35994;
}
.info_back_btn{
border: 1px solid #F35994;
color: #F35994;
padding: 10px 30px;
}
/* 共通 */
.top_btn a{
display: inline-block;
border: 1px solid #333;
padding: 15px 0;
border-radius: 25px;
color: #333;
width: 250px;
}
.top_btn a:hover{
color:#fff;
background-color: #F8B1CC;
text-decoration: none;
}
.title_box h2{
background: url(../img/h2_company_bg.gif) repeat-x center bottom;
padding-bottom: 25px;
margin-bottom: 60px;
}
@media screen and (min-width: 0px) and (max-width: 575px){
h2 {
font-size: 3.0rem;
margin-top: 20px;
}
}
/*--------------------------------------------------
* 採用情報
*--------------------------------------------------*/
.recruit .title_box h2{
background: url(../img/h2_company_bg.gif) repeat-x center bottom;
padding-bottom: 25px;
margin-bottom: 60px;
}
.recruit_table {
width:100%;
border-right:#F8B1CC solid 1px;
border-collapse: collapse;
}
.recruit_table th,.recruit_table td{
display:block;
padding:10px 15px;
}
.recruit_table th {
background:#F8B1CC;
color:#FFF;
border-bottom: solid 1px #fff;
width: 100%;
letter-spacing: 1px;
}
.recruit_table tr:last-child td {
border-bottom:#F8B1CC solid 1px;
}
.recruit_table td {
background:#FFF;
border-left:#F8B1CC solid 1px;
}
.entry a{
color: #F35994;
}
/*--------------------------------------------------
* フッター リニューアル
*--------------------------------------------------*/
footer {
background: #EC81AA;
padding-bottom: 85px;
position: relative;
z-index: 2;
}
.footer_inner{
padding: 40px 0 0 0;
}
.footer_icon ul{
gap: 0 5px;
}
.footer_logo img{
width: 70%;
height: auto;
}
.freetel img{
width: 75%;
height: auto;
}
.footer_kamei{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.footer_kamei tr{
background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 4px);
background-size: 6px 1px;
background-repeat: repeat-x;
background-position: left bottom;
}
.footer_kamei tr th{
padding: 10px 10px 10px 0;
width: 140px;
}
.footer_kamei tr td{
vertical-align: top;
padding: 10px 0 10px 5px;
}
/*PC向けおよび大型PCレイアウトの指定*/
@media only screen and (min-width:768px){
footer{padding-bottom: 0;}
.footer_inner{
width: 80%;
margin-left: 0;
padding-left: 20px;
}
.footer_icon ul{
gap: 0 10px;
}
.footer_icon ul li img{
width: 80px;
height: auto;
}
.footer_logo img{
width: 80%;
}
.freetel img{
width: 100%;
padding-top: 20px;
}
.footer_kamei{
margin-left:0;
width: 65%;
}
}
/*--------------------------------------------------
* column
*--------------------------------------------------*/
/*サムネイル画像サイズ統一*/
.column_thumb img{
width: 100%;
height: 200px;
object-fit: cover;
}
.ico_cat{
background-color:#F35994;
display: inline-block;
color: #fff;
font-size: 12px;
padding: 0 5px;
margin: 2px;
}
.column_box{
/*box-shadow: 1px 1px 3px #c5c5c5;*/
border-radius: 15px;
/*overflow: hidden;*/
border: 1px solid #333;
padding: 20px;
}
.column_txt{
padding: 10px 0 20px;
}
.column .container{
padding-bottom: 60px;
}
.column a{
color: #333;
}
.column a:hover{
opacity: 0.7;
text-decoration:none;
color:inherit;
}
.column_tag a{
background-color: #efefef;
text-decoration: none;
font-size: 12px;
border-radius: 14px;
padding: 4px 10px;
margin-right: 5px;
}
.column_ttl01{
margin-bottom: 20px;
}
/*目次の調整*/
#toc_container {
background: #fff; /* 背景色 */
border: 1px solid #ccc; /* 枠線 */
box-sizing: border-box; /* スマホの横揺れ防止 */
display: block !important;
font-size: 100%; /* フォントサイズ */
line-height: 1.4; /* 行間 */
margin: 2em 0; /* 外側の余白 */
padding: 2em 2em 1em; /* 内側の余白 */
width: 100% !important; /* 幅 */
}
.toc_title {
background: #eee; /* 背景色 */
font-weight: bold; /* 太字 */
padding: 0.4em 0; /* 内側の余白 */
text-align: center; /* 中央寄せ */
}
.toc_toggle {
display: none;
}
.toc_brackets {
display: none;
}
.toc_list,
.toc_list * {
list-style: none;
margin: 0;
padding: 0;
}
.toc_list {
margin-top: 1em;
}
.toc_list a {
display: block;
text-decoration: none;
}
.toc_list > li > a {
font-size: 16px; /* 大見出しのフォントサイズ */
padding-left: 1em;
line-height:1.8;
}
.toc_list > li > ul > li > a ,.toc_list > li > ul > li > ul > li a{
font-size: 15px; /* 小見出しのフォントサイズ */
padding-left: 1em;
line-height: 2;
}
.toc_list ul {
padding: 1em 0 0 1em;
}
.toc_list ul li ul {
padding: 0.3em 0 0 1em;
}
.toc_list li {
margin-bottom: 0.4em;
padding-bottom: 0.4em;
}
/*#toc_container ul li {
list-style: none;
position: relative;
padding: 0;
}*/
#toc_container ul li{
padding-left: 0.6em;
text-indent: -1.5em;
}
/*#toc_container ul li:before {
content: '';
width: 6px;
height: 6px;
background: #F35994;
border-radius: 50%;
vertical-align: middle;
}*/
#toc_container ul li a:before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: #F35994;
border-radius: 50%;
vertical-align:middle;
margin-right: 0.5em;
margin-bottom: 2px;
}
#toc_container ul li ul li a:before {
width: 6px;
height: 6px;
background: #fff;
border: 1px solid #F35994;
border-radius: 50%;
margin-bottom: 1px;
}
#toc_container ul li ul li ul li:before {
width: 6px;
height: 6px;
background: #fff;
border: 1px solid #F35994;
border-radius: 50%;
top:28%;
}
/*見出しのデザイン*/
.column_page h2{
background-color: #F35994;
color: #fff;
text-align: left;
padding: 10px;
font-size: 26px;
font-weight: bold;
line-height: 1.5;
}
.column_page h3{
color:#F35994;
font-size: 22px;
}
.column_page h4{
font-size: 18px;
border-bottom: 1px solid #D6D6D6;
padding-bottom: 5px;
}
.column_page mark{
font-style: normal;
font-weight: normal;
}
.column_page p{
line-height: 2;
font-size: 16px;
}
.column_page h2,.column_page h3,.column_page h4,.column_page p,.column_page img{
margin-bottom: 20px;
}
.column_page img{
max-width: 100%;
height: auto;
}
/*ボタン*/
.column_btn{
border: 1px solid #F35994;
display: inline-block;
padding: 10px 20px;
width :200px;
border-radius: 20px;
}
.column_btn a{
color: #F35994;
font-size: 16px;
}
.h3_column{
border-bottom: 1px solid #F35994;
padding-bottom: 8px;
margin-bottom:15px;
font-size: 18px;
}
.cat_wrap{
width: 100%;
border-radius: 15px;
padding: 10px 15px;
font-size: 16px;
}
.column_flex {
display: flex;
gap: 10px; /* 画像やコンテンツの間に空間を作るためのギャップ */
}
.kanren_img {
/*flex: 1 1 calc(50% - 20px); 2列にするために各ボックスの幅を設定 */
box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
width: 50%;
}
.kanren_img img {
width: 100%;
height: auto; /* 縦横比を保つために高さを自動調整 */
object-fit: cover; /* コンテナに収まるように画像をカバー */
display: block; /* 画像の下の余白を削除 */
}
.kanren .column_txt{
width: 50%;
}
.kanren .column_box{
/*box-shadow: 1px 1px 3px #c5c5c5;*/
border-radius: 15px;
/*overflow: hidden;*/
border: 1px solid #333;
padding: 10px;
}
/*人気記事*/
.ninki{
border: 1px solid #333;
border-radius: 15px;
padding: 20px;
}
.ninki img {
width: 100%;
height: auto; /* 縦横比を保つために高さを自動調整 */
object-fit: cover; /* コンテナに収まるように画像をカバー */
display: block; /* 画像の下の余白を削除 */
margin-bottom:5px;
}
ul.wpp-list li a.wpp-post-title {
display: block;
font-size: 18px;
line-height: 1.4;
margin: 0 10px 10px 0;
/*color: #1558d6; タイトル色 */
font-weight: bold; /* タイトルの太さ */
}
.wpp-category a{
background-color:#F35994;
display: inline-block;
font-size: 12px;
padding: 3px 4px;
color:#fff;
}
/* ランキング順位 */
ul.wpp-list li {
counter-increment: wpp-count;
}
ul.wpp-list li:before {
content: counter(wpp-count);
display: block;
position: absolute;
font-size: 20px;
font-weight: bold;
color: #fff; /* 順位の色 */
background-color: #F35994; /* 順位の背景色 */
padding: 10px 15px;
z-index: 1;
left: 10%;
}
/*タグ一覧*/
.column_tag ul li{
display: inline-block;
}
.tag_h3{
margin-bottom: 20px!important;
}
@media screen and (min-width: 500px) and (max-width:767px){
.column_thumb img{
height: 320px;
}
.kanren_img img {
width: 100%;
height: auto; /* 縦横比を保つために高さを自動調整 */
}
ul.wpp-list li:before {
left: 6%;
}
}
@media screen and (min-width: 768px){
.column_thumb img{
height: 280px;
}
.kanren_img img {
width: 100%;
height: auto; /* 縦横比を保つために高さを自動調整 */
}
ul.wpp-list li:before {
left: 8%;
}
}
/*--------------------------------------------------
* swiper
*--------------------------------------------------*/
/* swiper */
.swiper-slide{
width: 100%;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
height: 42px;
width: 42px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.swiper-button-prev{ left: 1%;}
.swiper-button-next{ right: -0.5%;}
.voice_container .swiper-button-prev{ left: 3%;}
.voice_container .swiper-button-next{ right: 1.5%;}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 42px;
margin: auto;
width: 42px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
background-image: url("../img/button-prev.png");
opacity: 1;
margin-left:-5px;
}
.swiper-button-prev:hover::after {
opacity: 0.5;
}
/* 次への矢印カスタマイズ */
.swiper-button-next:after {
background-image: url("../img/button-next.png");
opacity: 1;
margin-right: 0;
}
.swiper-button-next:hover::after {
opacity: 0.5;
}
/* 画像サイズ調整 */
/*.swiper-slide img {
height: auto;
width: 100%;
}*/
.swiper-container {
overflow: hidden;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
margin-right: 10px; /* 任意のマージンを設定 */
}
.works_wrap .kaitori_wrap .voice_wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}