@charset "UTF-8";
/*
Theme Name: yaruyan.net
Theme URI: https://yaruyan.net/
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/
/* YUI fonts.css - font size設定
----------------------------------------------------------- */
@import url("css/cssfonts-min.css");
/* default style - リセット及びbody基本設定
----------------------------------------------------------- */
@import url("css/default.css");
/* all style
----------------------------------------------------------- */
@import url("css/style.css");

body {
    min-width: 1200px;
    /*コンテンツ横幅を指定する（スマホ閲覧時の背景欠けを防ぐ）*/
    font-size: 16px;
    background: url(./img/bg_patBeige.png) center center;
}

.inner {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/*------------- common -------------*/

.tel span {
    background: url(./img/ico_tel.png) no-repeat left 80%;
    color: #e80000;
    font-family: 'Akshar', sans-serif;
    font-size: 50px;
    font-weight: 700;
    font-variation-settings: 'wght' 700, 'wdth' 90;
    line-height: 1;
    padding: 5px 0 0 45px;
    display: block;
    letter-spacing: -0.01em;
    background-size: 35px auto;
}

.btn {
    text-align: center;
}

.btn a {
    box-sizing: border-box;
    display: inline-block;
    color: #fff !important;
    font-size: 20px;
    padding: 15px 70px 15px 30px;
    text-decoration: none !important;
    border-radius: 100px;
    background: #e80000 url(./img/next_arrow02.png) no-repeat 95% center;
    border:3px solid #111;
}

.btn-white a {
    background: #fff url(./img/next_arrow03.png) no-repeat 90% center;
    padding: 15px 90px 15px 50px;
    color: #111 !important;
}

.btn-orange a {
    background: #e5007f url(./img/next_arrow02.png) no-repeat 90% center;
    padding: 10px 90px 10px 50px;
}

.btnDetail {
    background: #76b258;
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0px 2px 0px 0px rgba(256, 256, 256, 0.3) inset;
    -webkit-box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3) inset;
    color: #fff;
    padding: 0px 15px;
    display: inline-block;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px !important;
    font-weight: bold;
}

.btnDetail:hover,
.btn a:hover {
    opacity: 0.7;
    transition: 0.7s;
}

.btnDetail a {
    display: block;
    padding: 3px 10px !important;
    color: #fff;
    text-decoration: none !important;
    text-align: center;
    transition: 0.7s;
}

.bg01 {
    border-top: #e80000 solid 10px;
}

.bg02 {
    background: url(./img/bg_patBeige.png) center center;
}

.bg03 {
    position: relative;
}

.bg03:before {
    background: url(./img/stripe_bg.png) center center;
    transform: rotate(13deg);
    -webkit-transform: rotate(13deg);
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform: rotate(13deg);
    height: 700px;
    width: 200%;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: -50%;
    right: 0;
    z-index: -1;
}

.bg04 {
    background: #f5f4eb url(./img/bg_patBeige02.png) center center;
}

.bg05 {
    background: url(./img/paint_bg.png) repeat-y top center;
}

hr {
    margin: 30px 0;
    display: block;
    border: none;
    border-top: #ccc solid 1px;
}

.notice-r {
    color: #e80000 !important;
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    height: auto;
    background: url(./img/bg_patBeige.png) center center;
    transition: .3s;
}

header .htxt {
    position: static;
    width: 100%;
    margin-bottom: 5px;
}


header .htxt h1,
header .htxt p {
    font-size: 12px;
    font-weight: normal;
    display: block;
}

header .htxt p strong {
    font-weight: normal;
}

header .inner {
    overflow: hidden;
    width: 100%;
    padding: 5px 40px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .hdrLogo {
    font-size: 1rem;
    padding: 10px 0 0;
}

header .hdrLogo a {
    margin: 0 20px 0 0;
    display: block;
}

header .hdrLogo img {
    height:73px;
    width:auto;
}

header .hdrContact {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
}

header .hdrContact .lineBtn,
header .hdrContact .mailBtn,
header .hdrContact .menuBtn {
    display: inline-block;
    margin-left: 5px;
}

header .hdrContact .tel {
    margin-right: 20px;
    font-size: 14px;
}

header .hdrContact .tel br {
    display: none;
}

header .hdrContact .tel span {
    font-size: 40px;
}

header.is-animation .inner {
    justify-content: space-between;
}

header.is-animation .htxt {
    position: relative;
}

header.is-animation .hdrLogo {
    padding: 10px 0 0;
}

header.is-animation .hdrLogo a {
    display: block;
    width: 100%;
}

header.is-animation .hdrLogo img {
    height:60px;
    width:auto;
    margin-right:5px;
}

header.is-animation .hdrLogo img.headMedal {
    width: 36%;
}


header.is-animation .hdrContact {
    margin: 0 0;
}

header.is-animation nav {
    display: none;
}

/* -----------------------------------------------------------
    modalMenu
----------------------------------------------------------- */

header .menu-btn {
    cursor: pointer;
}

header .menu-btn span {
    color: #fff;
}

.modalmenu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
}

.modalmenu>ul {
    text-align: center;
    border-radius: 10px;
    border: solid 10px #555;
    padding: 20px;
    position: fixed;
    width: 90%;
    max-height: 80%;
    max-width: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    background: #fff;
}

.modalmenu li {
    display: inline-block;
    padding: 0 10px;
    margin-bottom: 15px;
}

.modalmenu li.title {
    display: block;
    background-color: #00a0e9;
    padding: 5px 10px;
    color: #FFF;
}

.modalmenu li.close {
    display: block;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    background: #eee;
    margin-bottom: 0;
    margin-top: 20px;
    line-height: 1.5;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .modalmenu {
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
}


/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */

footer{
	clear:both;
	font-size:16px;
}

footer .inner{
	width:1200px;
	margin:0 auto;
	padding:60px 0 20px;
}

/* ロゴ */
footer .ftrLogo{
	display:flex;
	align-items:center;
	margin-bottom:20px;
}

footer .ftrLogo a{
	margin-right:10px;
}

/* 見出し */
footer h5,
footer h6{
	font-size:16px;
	margin-bottom:10px;
}

/* ナビ */
footer nav{
	margin-bottom:60px;
}

footer nav > ul{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 30px;
	list-style:none;
	padding:0;
}

footer nav ul li a{
	font-size:13px;
	line-height:2;
	padding-left:20px;
	position:relative;
	text-decoration:none;
	color:#111;
    font-size: 16px;
}

/* 矢印 */
footer nav ul li a::before{
	content:"";
	position:absolute;
	left:0;
	top:7px;
	width:7px;
	height:7px;
	background:#e80000;
}

footer nav ul li a::after{
	content:"";
	position:absolute;
	left:2px;
	top:9px;
	width:2px;
	height:2px;
	border-top:#fff 1px solid;
	border-right:#fff 1px solid;
	transform:rotate(45deg);
}

/* コピーライト */
footer .copyRight{
	max-width:1200px;
	margin:0 auto;
}

footer .copyRight p{
	font-size:12px;
	text-align:right;
	padding:60px 0 30px;
}

/* -----------------------------------------------------------
    footerCon
----------------------------------------------------------- */

.contactBox {
    background: url(./img/bg_patRed.png) center center;
    padding: 50px 0 40px;
}

.contactBox .inner {
    width: 1000px;
    margin: 0 auto;
    padding: 0 !important;
}

.contactBox h2,
.contactBox h2 span.en {
    color: #fff;
}

.contactBox h2 {
    margin-bottom: 30px;
    font-size: 24px;
    padding: 0 !important;
}

.contactBox h2 span.en {
    font-size: 50px;
}

.contactBox .inBox {
    background: #fff !important;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.contactBox .inBox .tel {
    font-size: 13px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    margin: 0 20px 0 0;
}

.contactBox .inBox .tel span {
    float: left;
    margin-right: 10px;
    line-height: 0.8;
}

.contactBox .inBox .tel a {
    color:#e80000;
    text-decoration:none;
}

.contactBox .imgLayer {
    bottom: 5px;
    right: 0;
    width: 15%;
}

.contactBox .btn-list {
    /* display: flex;
    justify-content: space-between; */
    margin-bottom: 0;
}


.contactBox .btn-list li {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 0;
    width: auto;
}

.contactBox .btn-list li:before,
.contactBox .btn-list li:after {
    content: none;
}

.contactBox .btn-list li a {
    text-align: center;
    padding: 10px 30px;
    color: #fff;
    text-decoration: none;
    display: block;
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    font-size: 20px;
    justify-content: center;
}

.contactBox .btn-list li img {
    margin-right: 10px;
}

.contactBox .btn-list li.btncontact {
    background: #e80000;
    border: solid 3px #111;
}

/* -----------------------------------------------------------
    nav
----------------------------------------------------------- */
header nav {
    /* float: right; */
    padding: 10px 0;
}

header nav ul {
    margin: 0 auto 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
}

header nav li {
    display: block;
    white-space: nowrap;
    border-right: 1px solid #ecd8c3;
    width: calc(100%/6);
    text-align: center;
    box-sizing: border-box;
    height: 50px;
}

header nav li:first-child {
    border-left:1px solid #ecd8c3;
}

header nav li img,
header nav li i {
    display: block !important;
    margin: 5px auto;
}

header nav li i {
    height: 20px;
    font-size: 18px;
}

header nav li a {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
}

header nav li a:link,
header nav li a:visited {
    color: #111;
    text-decoration: none;
    transition: 0.7s;
}

header nav li a:hover {
    transition: 0.7s;
    opacity: 0.8;
}


/* -----------------------------------------------------------
    .mainv
----------------------------------------------------------- */
.mainv {
    margin-bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.mainv .stage {
    width: 100%;
    margin: 0 auto;
    z-index: 0;
}

.mainv .stage span {
    width: 1000px;
    z-index: 10 !important;
}

.slick-slide {
    opacity: 0.5;
    transition: 0.5s;
}

.slick-current {
    opacity: 1;
}

.mainv .stage button {
    position: absolute;
    z-index: 2000;
}

#arrows {
    width: 1110px;
    margin: 0 auto;
    position: relative;
}

#arrows button {
    position: absolute;
    border: none;
}

#arrows button.slick-prev,
#arrows button.slick-next {
    background: none;
    outline: none;
    cursor: pointer;
    width: 2000px;
    height: 436px;
}

#arrows button.slick-prev {
    right: 1050px;
    top: -436px;
}

#arrows button.slick-next {
    left: 1050px;
    top: -436px;
}

#arrows button.slick-prev:before,
#arrows button.slick-next:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
}

#arrows .slick-prev:hover {
    background: url(./img/leftNav.png) right center no-repeat;
    opacity: 1;
}

#arrows .slick-next:hover {
    background: url(./img/rightNav.png) left center no-repeat;
    opacity: 1;
}


.slick-dots {
    position: absolute;
    bottom: -50px;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 10px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
    position: relative;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    content: '';
    text-align: center;
    display: block;
    background: #ccc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    background: #fed900;
}

/* -----------------------------------------------------------
    contents
----------------------------------------------------------- */


#contents {
    margin: 0 auto 0;
    position: relative;
    overflow: hidden;
}


/* #contents section {
    margin: 0 auto;
    border-bottom: none;
} */

/*--メインカラム--*/
/* -----------------------------------------------------------
    main
----------------------------------------------------------- */
.main {
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0 0;
}

/*--基本の記事スタイル設定--*/
.main section {
    margin-bottom: 50px !important;
    position: relative;
}

.main section:after {
    content: ".";
    /* 新しい要素を作る */
    display: block;
    /* ブロックレベル要素に */
    clear: both;
    height: 0;
    visibility: hidden;
}

.main article {
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.main .inner {
    width: 1000px;
    margin: 0 auto;
    padding: 50px 0;
}

.w800 {
    width: 800px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.w1000 {
    width: 1000px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.main .inBox {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px 20px 0;
    border-radius: 4px;
}

.main .dotLine {
    border-bottom: #111 dotted 1px !important;
    padding-bottom: 0;
}

.main p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 15px;
}

.main section p:last-child {
    margin-bottom: 0;
}

.main a {
    text-decoration: underline;
}

h1,
h2 {
    line-height: 1.5;
    clear: both;
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    line-height: 1.5;
    clear: both;
    font-weight: 500;
}

h2 {
    color: #111;
    font-size: 46px;
    text-align: center;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 40px;
    font-weight: normal;
}

h2 span.txtB {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #f8b62b, #f8b62b);
    /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 30%;
    /* '30%'の部分にマーカーの太さを記入 */
    transition: all 1s ease-in-out;
    /* マーカーを引く速度を調整 */
    font-weight: bold;
    /* ついでに太字にしたい場合 */
}

/* アニメーション発火時 */
h2 span.txtB.inview {
    background-size: 100% 30%;
    /* '30%'の部分は上で設定した太さに合わせる */
}

h2 span.en {
    color: #00a0e9;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    display: block;
    font-size: 30px;
    font-weight: 500;
    transform: scale(0.8, 1.0);
}

span.balloonTtl {
    display: inline-block;
    border-radius: 50px;
    background: #d00000;
    font-size: 48px;
    color: #fff;
    line-height: 1.1;
    padding: 5px 25px 8px;
    margin: 0 0 10px 0;
    position: relative;
    text-align: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

span.balloonTtl:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #d00000 transparent;
    border-width: 15px 20px 0 20px;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 0;
    height: 0;
}


.main h3 {
    font-size: 32px;
    line-height: 1.4;
    font-weight: normal;
    font-weight: 500;
    color: #fff;
    margin: 0 0 20px 0;
    background: #00a0e9;
    padding: 5px 10px;
}

.main>h3 span {
    display: inline;
    color: #ec6d01;
    font-size: 30px;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    font-weight: 400;
    margin-left: 10px;
    transform: scale(0.8, 1.0);
}

.main h4 {
    font-size: 19px;
    padding: 0 0 0 50px;
    margin: 0 0 20px;
    position: relative;
    line-height: 1.8;
}


.main h4:before,
.main h4:after {
    border-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    font-size: 30px;
    line-height: 1.0;
    background: #e5007f;
    width: 20px;
    height: 20px;
}

.main h4:before {
    left: 0;
    opacity: 0.5;
}

.main h4:after {
    left: 23px;
}


.main h5 {
    background: #f8b62b;
    color: #111;
    font-size: 18px;
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 10px;
    line-height: 1.2;
    box-sizing: border-box;
    clear: both;
}

.main h5 a {
    color: #FFF;
    text-decoration: underline;
}

.main h6 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
}

.ttl-ico {
    font-size: 46px;
    font-weight: 700;
    position: relative;
    min-height: 135px;
}

.ttl-ico.inview:before,
.ttl-ico.inview:after {
    content: '';
    position: absolute;
    width: 242px;
    height: 182px;
    top: 0;
    bottom: 0;
    margin: auto;
    animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    -webkit-animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.ttl-ico.inview:before {
    background: url(./img/ico_ttl_bgL.png) no-repeat center center;
    left: 0;
    perspective-origin: 0 0;
}

.ttl-ico.inview:after {
    background: url(./img/ico_ttl_bgR.png) no-repeat center center;
    right: 0;
    perspective-origin: center right;
}


@keyframes popup {
    0% {
        transform: translateY(40px) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1.0);
    }

    80%,
    100% {
        opacity: 1;
    }
}

.ttl-ico span {
    font-size: 30px;
    padding: 0;
    margin: 0 0 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ttl-ico span:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(45deg, transparent 49%, #e80000 49%, #e80000 53%, transparent 53%, transparent);
    background-size: 33px 33px;
    margin-right: 5px;
    flex-grow: 0;
    flex-shrink: 0;
}

.ttl-ico span:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(-45deg, transparent 49%, #e80000 49%, #e80000 53%, transparent 53%, transparent);
    margin-left: 5px;
    background-size: 33px 33px;
    flex-grow: 0;
    flex-shrink: 0;
}

.ttl-ico small.ribbonShk {
    font-size: 18px;
    background: #004593;
    color: #fff;
    position: relative;
    display: block;
    width: 14em;
    margin: 5px auto 0;
    padding: 5px 20px;
}

.ttl-ico small.ribbonShk:before,
.ttl-ico small.ribbonShk:after {
    content: '';
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    right: -30px;
    background: url(./img/beige_bg.png) center center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    margin: auto;
}

.ttl-ico small.ribbonShk:after {
    left: -30px;
    right: inherit;
}

.ttl-character {
    width: auto;
    padding: 380px 0 0;
    line-height: 1.2;
    text-shadow: 1px 1px 0 #111;
    color: #fff;
    font-weight: bold;
    text-align: left;
}

.ttl-character>span {
    background: rgba(0, 69, 147, 0.9);
    width: 100%;
    display: block;
    padding: 20px 0;
}

.ttl-character span.ttl-txt {
    display: block;
    font-size: 46px;
    width: 1200px;
    position: relative;
    display: block;
    margin: 0 auto;
}

.ttl-character span small {
    font-size: 30px;
    display: block;
    margin: 0 auto;
}

.ttl-character span .imgLayer {
    right: 0;
    bottom: -15px;
}

.ttl-character span .imgLayer.inview {
    animation: wobble-vertical 1s ease-in-out 1;
    -webkit-animation: wobble-vertical 1s ease-in-out 1;
}

@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }

    33.3% {
        transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
    }

    49.95% {
        transform: translateY(4px);
    }

    66.6% {
        transform: translateY(-2px);
    }

    83.25% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}

.bg-chara span.ttl-txt:after {
    content: '';
    background: url(./img/character.png) no-repeat center center;
    width: 200px;
    height: 200px;
    right: 0;
    bottom: -40px;
    display: block;
    position: absolute;
    background-size: contain;
}

.main blockquote p {
    margin: 0;
}

.main ul {
    margin-bottom: 15px;
}

.main ul li,
.main ul.normal li {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    text-align: left;
    width: auto;
}

.main ul li:before,
.main ul li:after,
.main ul.normal li:before,
.main ul.normal li:after {
    position: absolute;
    top: 10px;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.main ul li:before,
.main ul.normal li:before {
    width: 7px;
    height: 7px;
    background: #e5007f;
}

.main ul li:after,
.main ul.normal li:after {
    left: 2px;
    width: 2px;
    height: 2px;
    top: 11px;
    border-top: #fff 1px solid;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

.main ul.normal {
    display: block;
}

.main ol {
    margin-bottom: 15px;
    padding-left: 40px
}

.main ol li {
    list-style-type: decimal;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 5px 0;
}

.main table {
    width: 100%;
    margin: 0 0 0;
    box-sizing: border-box;
    border-top: #ccc solid 1px;
}

.main table caption {
    display: none;
}

.main table th,
.main table td {
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    border-bottom: #ccc solid 1px;
    box-sizing: border-box;
    padding: 15px 20px;
}

.main table thead th {
    background: #00a0e9;
    color: #fff;
    text-align: center;

}

.main table tbody th {
    width: 25%;
    color: #07508e;
}

.main table tbody th span {
    color: #fff;
    background-color: #004593;
    display: block;
    text-align: center;
    padding: 3px 0;
}

.main table td {
    position: relative;
    overflow: hidden;
}

.main table td a {
    margin-bottom: 0;
}

.main table td ul {
    margin-bottom: 0;
}

/*--共通パーツ--*/
.main .lead {
    text-align: center;
    margin-bottom: 50px;
}

.main .lead p {
    line-height: 2;
}

.main .cornerMainv {
    position: relative;
    margin-bottom: 50px;
}

.main .cornerMainv h2 {
    background: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 40px;
    bottom: 10px;
    text-align: center;
}

.main .cornerMainv h2:after {
    content: none;
}

.main .frameBox {
    background: #fff;
    border: #e4e7cf solid 5px;
    padding: 5px;
    box-sizing: border-box;
}


.main .photoUL {
    margin: 0 0 30px 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    clear: both;
}

.main .photoUL li {
    margin: 20px 0 0 0;
    padding: 0;
    background: none;
    font-size: 13px;
    overflow: hidden;
    position: relative;
    width: 48%;
    width: calc(50% - 20px);
    text-align: center;
}


.main .photoUL li:before,
.main .photoUL li:after {
    content: none;
}



.main .photoUL li span {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 5px;
}

.main .photoUL li span:before {
    content: '' !important;
    display: block;
    padding-top: 75%;
}


.main .photoUL li span img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.main .photoUL li h5 {
    font-size: 15px;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    color: #111;
}

.main .photoUL.column3 li {
    width: 33%;
    width: calc(33% - 20px);
}

/*--下層ページメインビジュアル--*/
#pageTitle {
    position: relative;
    overflow: hidden;
    height: 350px;
    margin-top: 135px;
}

#pageTitle .inner {
    width: 100%;
    height: 100%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

#pageTitle h1 {
    color: #FFF;
    position: relative;
    margin: 0 auto;
    padding: 25px 70px;
    font-size: 40px;
    line-height: 1.2;
    background: rgba(0, 69, 147, 0.9);
    display: inline-block;
    text-align: center;
}

#pageTitle h1:after {
    content: '';
    background: url(./img/character.png) no-repeat center center;
    width: 200px;
    height: 200px;
    left: 90%;
    bottom: -30px;
    display: block;
    position: absolute;
    background-size: contain;
}

#pageTitle h1 span {
    display: block;
    font-size: 32px;
    font-weight: 400;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    transform: scale(0.8, 1.0);
}


/*投稿画像の回り込み処理*/
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 0;
    margin: 0 0 20px 30px;
    display: inline;
}

img.alignleft {
    padding: 0;
    margin: 0 30px 20px 0;
    display: inline;
}

img.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 2px;
}

.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 2px;
}

img {
    border-style: none;
}

.main .nobr br {
    display: none;
}

.main p.wp-caption {
    margin: 0 0 10px 0;
    font-size: 0.8em;
    line-height: 1.2em;
}

.main p.wp-caption img {
    margin-bottom: 5px;
}

.main p.wp-caption .caption-text {
    text-align: left;
}

/*pagenavi*/
.pagenavi {
    padding: 20px 0 !important;
    margin: 0 auto 40px !important;
    text-align: center;
    position: relative;
}

.pagenavi ul {
    position: relative;
    overflow: hidden;
    height: 60px;
    margin: 0 !important;
}

.pagenavi a {
    display: inline-block;
    color: #fff !important;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    padding: 5px 10px;
    text-decoration: none !important;
    border-radius: 50px;
    background: #00a0e9;
    width: 190px;
    box-sizing: border-box;
}

.pagenavi a:link,
.pagenavi a:hover,
.pagenavi a:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.pagenavi a:hover {
    opacity: 0.75;
    transition: 0.7s;
}

.pagenavi li {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    display: inline-block;
    font-weight: bold;
    position: absolute !important;
    text-align: center !important;
}

.pagenavi li:before,
.pagenavi li:after {
    content: none !important;
}

.pagenavi .prev {
    position: absolute;
    left: 0;
}

.pagenavi .next {
    position: absolute;
    right: 0;
}

.pagenavi li.list {
    position: initial !important;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0;
}

.pagenavi .list a:before,
.pagenavi li.list a:after {
    content: none;
}


.main .wp-pagenavi,
.wp-pagenavi {
    text-align: center;
    margin: 30px 0;
}

.main .wp-pagenavi a {
    background: #00a0e9;
    padding: 0 5px;
    text-align: center;
    transition: 0.7s;
    border: none;
    display: inline-block !important;
    overflow: inherit !important;
}

.main .wp-pagenavi span {
    padding: 0 5px;
    text-align: center;
    transition: 0.7s;
}

.main .wp-pagenavi span.pages,
.main .wp-pagenavi span.last {
    display: inline-block;
}

.main .wp-pagenavi a:link,
.main .wp-pagenavi a:visited {
    color: #ffffff !important;
    text-decoration: none;
}

.main .wp-pagenavi a:hover,
.main .wp-pagenavi span.current {
    border-color: #bfbfbf;
    display: inline-block;
}

.main .wp-pagenavi a:hover {
    color: #fff !important;
    opacity: 0.7;
}

/*-------------------.articleBox-----------------*/
.main .articleBox h2 {
    padding: 30px 0 0;
}

.main .articleBox {
    margin-bottom: 0 !important;
}

.main .articleBox article {
    padding: 50px 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

/*-------------------.shopAccess-----------------*/
.main .shopAccess {
    margin-bottom: 0 !important;
}

.main .shopAccess .inner {
    width: 1200px;
    padding-bottom: 0 !important;
}

.shopAccess ul {
    margin-bottom: 0;
}

.shopAccess ul li {
    padding: 0;
}

.shopAccess ul li:before,
.shopAccess ul li:after {
    content: none;
}

.shopAccess>ul>li {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.shopAccess h3 {
    font-size: 32px;
    font-weight: bold;
    color: #004593;
    margin-bottom: 10px;
    background: none;
    padding: 0;
}

.shopAccess .thumb-shop {
    float: left;
    margin-right: 60px;
}

.shopAccess .thumb-shop li {
    width: 520px;
    height: 360px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
}

.shopAccess li:last-child {
    margin-bottom: 0;
}

.shopAccess .thumb-shop li img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.shopAccess .thumb-shop li iframe {
    width: 340px;
    height: 190px;
}

.shopAccess .tel span {
    font-size: 38px;
    margin-right: 10px;
    display: inline-block;
}

.shopAccess .shopSummery {
    overflow: hidden;
}

.shopAccess .shopSummery table {
    background: none;
    border-top: #111 dotted 1px;
    margin-bottom: 10px;
}

.shopAccess .shopSummery table th,
.shopAccess .shopSummery table td {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    border-bottom: #111 dotted 1px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: #111;
}

.shopAccess .list-shopbtn {
	display:flex;
	justify-content:center;
	gap:20px;
}

.shopAccess .list-shopbtn li {
	width:300px;
	text-align:center;
}

.shopAccess .list-shopbtn li a {
	background:#e80000;
	padding:10px 10px;
	font-size:18px;
	display:block;
}

.shopAccess .list-shopbtn li a.btn_blue {
	background:#002b5c;
}

.shopAccess .photoUL {
    padding: 0 20px;
}

.shopAccess .shopMap {
    margin: 60px 0 40px 0;
    clear: both;
    border-radius: 4px;
}



/*-------------------combnrList-----------------*/

.comBnr.inner {
    padding: 20px 0;

}

.combnrList {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.combnrList li {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 0 !important;
    text-align: center !important;
    ;
    margin: 0;
    border-radius: 8px;
    background: #26539D;
    width: 480px !important;
}

.combnrList li:before,
.combnrList li:after {
    content: none !important;
}


.combnrList li:hover {
    opacity: 0.8;
    transition: 0.7s;
}

.combnrList li a {
    color: #fff !important;
    text-decoration: none !important;
    display: block;
}

.combnrList li.bnrDiagnosis {
    background: #5E2B06;
}

.combnrList li img {
    width: 100%;
}

/*-------------------.message-----------------*/
.msgBox {
    padding: 100px 0;
    overflow: hidden;
}

.msgBox .msgBox-inner {
    width: 1200px;
    margin: auto;
}

.msgBox h2 {
    font-weight: 700;
}

.msgPhoto {
    float: right;
    margin-left: 50px;
}

.msgPhoto .ceoPict {
    margin-bottom: 20px;
}

.msgPhoto h5 {
    background: #e80000;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 5px 10px;
    margin-bottom: 5px;
}

.msgPhoto p {
    font-size: 22px;
}

.msgPhoto .en {
    font-size: 11px;
    color: #e80000;
    margin-left: 5px;
}

.msgTxt {
    overflow: hidden;
}

.msgTxt p {
    font-size: 16px;
    line-height: 2;
}

.msgTxt strong {
    background: linear-gradient(transparent 60%, #f8b62b 60%);
}

/*-------------------#top-----------------*/


#top .swiper-container {
    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    position: relative;
}

#top .swiper-container .inner {
    width: 1200px;
    /* max-width:900px; */
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 11;
}

#top .swiper-container .inner a {
    display: block;
    z-index: 11;
}

.slide {
    width: 100%;
    overflow: hidden;
    background: url(./img/bg_patRed.png) center center;
    padding: 40px 0 20px;
    margin-top: 120px;
}

#top .swiper-pagination {
    position: relative;
    margin-top: 20px;
}

#top .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    margin: 0 10px;
    opacity: 0.5;
}

#top .swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next,
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background: none !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none;
}

.swiper-button-prev {
    left: -46px !important;
}

.swiper-button-next {
    right: -46px !important;
}

.swiper-button-prev:before,
.swiper-container-rtl .swiper-button-next:before,
.swiper-button-next:before,
.swiper-container-rtl .swiper-button-prev:before {
    font-family: "Font Awesome 5 Free";
    content: '\f137';
    font-weight: 900;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    margin: auto;
    vertical-align: middle;
    height: 42px;
    line-height: 1;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.8);
}

.swiper-button-next:before,
.swiper-container-rtl .swiper-button-prev:before {
    content: '\f138';
    right: 0;
    left: inherit;
}

/*medal*/
#top .medal{
	padding:40px 0;
    margin: 0;
}

#top .medal-inner{
	width:1000px;
	margin:0 auto;
}

#top .medal-list{
	display:flex;
	justify-content:center;
	gap:40px;
	list-style:none;
	padding:0;
	margin:0;
}

#top .medal-list li{
	width:190px;
    list-style:none;
}

#top .medal-list li:before,
#top .medal-list li:after{
	content:none;
}

#top .medal-list img{
	width:100%;
	height:auto;
	display:block;
}

#top .information {
    margin-bottom: 80px !important;
}

#top .information ul {
    margin: 0 0 40px 0;
    padding: 0 0 0 0;
    clear: both;
}

#top .information li {
    border-bottom: solid 1px #CCC;
    padding: 15px 0;
    overflow: hidden;
}

#top .information li:before {
    content: none;
}

#top .information li p {
    display: block;
    margin: 0;
    float: left;
}

#top .information li p.date {
    width: 140px;
    color: #07508e;
    font-weight: 400;
}

#top .information li p.cat {
    width: 120px;
    margin-right: 10px;
}

#top .information li p.cat a {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

#top .information li p.title {
    width: 470px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#top .information li p.title a {
    text-decoration: none !important;
    display: block;
}

#top .information li p.more {
    float: right;
}

#top .information li p.more a {
    display: inline-block;
    background: #00a0e9;
    color: #fff !important;
    margin: 0 4px 4px 0;
    text-decoration: none !important;
    padding: 3px 5px;
    line-height: 1;
    font-size: 13px;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
}

.information .thumbImg {
    width: 180px;
    height: 130px;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 30px 0 0;
}

.information .thumbImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    display: inline-block;
}

#top .information li:first-child p.cat {
    width: auto;
    float: none;
}

#top .information li:first-child p.cat a {
    width: 140px;
}

.cat a.news {
    background: #4cc764;
}

.cat a.campaign {
    background: #d00000;
}

#top .information li:first-child p.conTxt {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
}

#top .information li:first-child p.more {
    position: absolute;
    right: 0;
    bottom: 10px;
}




/*-------------------#faq-----------------*/

.faqDetail h3 {
    display: block;
    background: #e6eaf3;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    border-left: solid 60px #00a0e9;
    padding: 20px 90px 20px 20px;
    position: relative;
    margin-bottom: 1px;
    position: relative;
    cursor: pointer;
}

.faqDetail.single h3 {
    cursor: auto;
}

.faqDetail h3::before {
    content: "Q";
    color: #FFF;
    position: absolute;
    top: 10px;
    left: -44px;
    font-size: 50px;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    line-height: 1.0;
}

.main .faqDetail article {
    margin-bottom: 30px;
}

.faqDetail article>div {
    background: #ebebeb;
    border-left: solid 60px #6bb837;
    padding: 20px;
    position: relative;
}

.faqDetail article>div::after {
    content: "A";
    color: #FFF;
    position: absolute;
    top: 10px;
    left: -44px;
    font-size: 50px;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    line-height: 1.0;
}

.faqDetail article>div *:last-child {
    margin-bottom: 0 !important;
}

.main .faqDetail article>div h6 {
    margin-bottom: 5px;
}

.faqDetail article>div .faqLink li::after,
.faqDetail article>div .faqLink li::before {
    content: none !important;
}

.faqDetail article>div .faqLink {
    overflow: hidden;
}

.faqDetail article>div .faqLink li {
    float: left;
    padding: 0 !important;
    margin: 0 !important;
}

.faqDetail article>div .faqLink li a {
    display: inline-block !important;
    background: #ec6d01;
    color: #fff !important;
    font-weight: bold;
    margin: 0 4px 4px 0;
    text-decoration: none !important;
    padding: 3px 5px;
    line-height: 1;
    font-size: 13px;
}

.faqDetail .toggle_btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: #00a0e9;
    display: block;
    width: 24px;
    height: 24px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 50%;
}

.faqDetail .toggle_btn:before,
.faqDetail .toggle_btn:after {
    display: block;
    content: '';
    background-color: #fff;
    position: absolute;
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faqDetail .toggle_btn:before {
    width: 2px;
    height: 10px;
}

.faqDetail h3.selected .toggle_btn:before {
    content: normal;
}

.faqDetail .faqAnswer {
    display: none;
}


/*-------------------#privacy-----------------*/

#privacy .main h5 {
    transform: scale(1.0, 1.0);
    background: #008ed7;
    color: #FFF;
    display: inline-block;
    padding: 15px 50px;
    line-height: 1.1;
    margin: 0 0 20px 0;
}

/*-------------------#contact-----------------*/
.main #form h3 {
    background: #e80000;
    text-align: center;
    border-radius: 4px;
    padding: 20px 0;
    font-weight: 700;
}

.main #form h3 span {
    font-size: 20px;
}

.main form p {
    margin:5px auto 20px;
}

.main form table tbody th {
    width: 28%;
}

.main form table tbody th span {
    display: inline-block;
    width: 164px;
    border-radius: 4px;
}

.main form table tbody th span.req,
.main form table tbody th span.any {
    width: 50px;
    text-align: center;
    margin-left: 10px;
    background-color: #e80000;
    padding: 0;
    font-size: 14px;
}

.main form table tbody th span.any {
    background-color: #CCC;
}

.main form table tbody td {
    padding: 10px 0 10px 20px;
    vertical-align: middle;
}

.main form table tbody td input[type="text"],
.main form table tbody td input[type="email"] {
    background: #fffde7;
    border: solid 1px #CCC;
    font-size: 16px;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.main form table tbody td textarea {
    background: #fffde7;
    border: solid 1px #CCC;
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.main form table tbody td span.note {
    font-size: 12px;
}

.main form .privacy {
    text-align: center;
    margin-bottom: 20px;
}

.main form .privacy a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
    border: solid 1px #555;
    border-radius: 5px;
    margin-top: 10px;
}

.main .wpcf7-form-control-wrap {
    display: block;
}

.main .wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
}

.main .wpcf7-checkbox span.wpcf7-list-item {
    position: relative;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box;
}

.main .wpcf7-checkbox span.wpcf7-list-item:last-child {
    margin: 0 0 0 0 !important;
}

.main .wpcf7-checkbox .wpcf7-list-item-label {
    color: #111;
    cursor: pointer;
    margin-right: 16px;
}

.main .wpcf7-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.main .wpcf7-checkbox .wpcf7-list-item-label:before {
    content: '';
    border: 1px solid #ccc;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: -3px;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    background: #fff;
}

.main .wpcf7-checkbox input[type="checkbox"]:checked+.wpcf7-list-item-label:after {
    content: "";
    display: block;
    position: absolute;
	top: 4px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: url("./img/ico_check.png") no-repeat center;
    background-size: contain;
}

.wpcf7-radio .wpcf7-list-item {
    margin: 0 15px 0 0;
}

.wpcf7-radio .wpcf7-list-item.last {
    margin: 0;
}

.main .wpcf7-not-valid-tip {
    color: #e80000;
    font-size: 12px;
    font-weight: bold;
}

.main .wpcf7 input[type="submit"] {
    display: block;
    width: 290px;
    margin: 40px auto 0;
    border-radius: 100px;
    border: none;
    color: #FFF;
    background: #e80000;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    border:3px solid #111;
}



/*-------------------#archive-----------------*/

.main article.single {
    margin-bottom: 0;
}

.main .taxList li,
.main .areaList li {
    display: inline-block;
    padding: 0;
    background: none;
    margin: 0;
}

.main .taxList li:before,
.main .areaList li:before,
.main .taxList li:after,
.main .areaList li:after {
    content: none;
}

.main .taxList li a,
.main .areaList li a {
    display: inline-block;
    background: #d00000;
    color: #fff;
    font-weight: bold;
    margin: 0 4px 4px 0;
    text-decoration: none;
    padding: 0 5px;
    border-radius: 3px;
    position: inherit;
}

.main .areaList li a {
    background-color: #111;
    border: solid 1px #111;
}

.main .taxList li.current-cat a {
    background-color: #fff;
    color: #d00000;
    border: solid 1px #d00000;
}

.main .areaList li.current-cat a {
    background-color: #fff;
    color: #111;
    border: solid 1px #111;
}

.infoBox {
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    border-bottom: #111 dotted 1px;
    padding-bottom: 10px;
}

.infoBox .time {
    float: right;
    font-weight: 800;
    color: #00a0e9;
    margin: 0 0 0 0 !important;
}

.infoBox .cat {
    float: left;
}

.cat a {
    display: inline-block !important;
    background: #e5007f;
    color: #fff !important;
    margin: 0 4px 4px 0;
    text-decoration: none !important;
    padding: 3px 5px;
    line-height: 1;
    font-size: 13px;
}

.main .archiveBox {
    padding: 50px 0;
}

.main .archiveBox.inner {
    width: 1200px;
}

.main .archiveList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.main .archiveList .thumbImg {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    background: #f5f5f5;
    margin-bottom: 40px;
}

.main .archiveList .thumbImg:before {
    content: '' !important;
    display: block;
    padding-top: 75%;
}


.main .archiveList .thumbImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    display: inline-block;
}

.main .archiveList .thumbImg:after {
    content: url(./img/next_arrow.png);
    position: absolute;
    right: 0;
    bottom: 0;
    height: 31px;
    margin: auto;
}

.main .archiveList article {
    position: relative;
    width: 33%;
    width: calc(33% - 25px);
    text-align: center;
    margin-right: 25px;
}

.main .archiveList article:nth-child(3n) {
    margin-right: 0;
}

.main .archiveList article a {
    text-decoration: none;
}

.main .archiveList h3 {
    height: 3em;
    font-size: 18px;
    background: none;
    padding: 0;
    color: #111;
    margin-bottom: 0;
}

.archiveList .cat {
    position: absolute;
    bottom: 3.5em;
    left: 0;
    right: 0;
    margin: auto;
}

.archiveList .cat a {
    background: #d00000;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

/*----------.blog ----------*/
.main .archiveBlog {
    display: block;
}

.main .archiveBlog article {
    width: 100%;
    border-bottom: solid 1px #CCC;
    padding: 30px 0;
    overflow: hidden;
    text-align: left;
    margin-bottom: 0;
}

.main .archiveBlog .thumbImg {
    width: 25%;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 30px 0 0;
}

.archiveBlog .infoBox {
    margin-bottom: 10px;
}

.main .archiveBlog h3 {
    font-style: 20px;
    height: auto;
}

.archiveBlog .cat {
    position: relative;
    bottom: inherit;
    text-align: center;
}

.archiveBlog .cat a {
    background: #e5007f;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    width: 10em;
}

.archiveBlog .cat a.news {
    background: #4cc764;
}

.archiveBlog .cat a.campaign {
    background: #d00000;
}

.archiveBlog .more {
    float: right;
    margin-bottom: 0;
}

.archiveBlog .more a {
    display: inline-block;
    background: #00a0e9;
    color: #fff !important;
    margin: 0;
    text-decoration: none !important;
    padding: 5px 10px;
    line-height: 1;
    font-size: 15px;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
}

/*---20250703---*/
#blog .main table {
    border: #111 solid 1px;
    margin-bottom: 30px;
}

#blog .main table td {
    border: #111 solid 1px;
    padding: 10px;
}

/*-------------------.works-----------------*/
.main .picBox {
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}

.main .picBox .photo {
    float: right;
    width: 686px;
    height: 456px;
    position: relative;
    overflow: hidden;
}

.main .picBox .btmPhoto {
    float: left;
    width: 287px;
    height: 207px;
    position: relative;
    overflow: hidden;
}

.main .picBox .photo img,
.main .picBox .btmPhoto img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.main .picBox .arrowImg {
    margin: 10px 0 0;
    float: right;
}

.main .picBox02 {
    margin-top: 40px;
}

.main .picBox02 .photo {
    float: right;
    width: 686px;
    position: relative;
}

.main .picBox02 .btmPhoto {
    float: left;
    width: 287px;
    position: relative;
}

.main .picBox02 .arrowImg {
    margin: 15px 0 0 100px;
}

.main .picBox span.after,
.main .picBox span.before {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e5007f;
    display: inline-block;
    z-index: 10;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    padding: 3px 10px 2px 10px;
}

.main .picBox span span {
    opacity: 0.5;
    margin-left: 5px;
}


.singleWorks table {
    margin-bottom: 30px;
}

/*-------------------.voice-----------------*/
.main .archiveList.voiceList .thumbImg {
    margin-bottom: 5px;
}

.main .voiceSummary {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.main .voicephotList {
    float: left;
    margin: 0 30px 20px 0;
}

.main .voicephotList li {
    width: 316px;
    height: 206px;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 0;
}

.main .singleVoice .enqImg {
    height: auto;
    margin: 0 auto 20px;
    box-sizing: border-box;
    text-align: center;
}

.main .voicephotList .enqImg a {
    display: block;
}

.main .voicephotList li img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.main .singleVoice .enqImg img {
    width: 100%;
    height: auto;
    border: solid 1px #ccc;
    object-fit: contain;
}

.main .voicephotList li:before,
.main .voicephotList li:after {
    content: none;
}


/*-------------------.about-----------------*/
.main .about {
	padding:60px 0 0;
    margin-bottom: 30px !important;
}

.about-inner{
	display:flex;
	align-items:flex-start;
	gap:60px;
}

/* 左写真 */
.about-photo{
	width:66.666%;
	margin-left:calc(50% - 50vw);
}

.photo-main img{
	width:100%;
	height:auto;
	display:block;
    border-radius:0 4px 4px 0;
}

.photo-sub{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:60px;
	margin-left:230px;
	margin-right:60px;
}

.photo-sub img{
	width:100%;
	display:block;
    border-radius:4px;
}

/* 右テキスト */
.about-text{
    width:33.333%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-right:200px;
}

.about-title{
	display:flex;
	gap:5px;
	align-items:flex-start;
    margin-bottom: 60px;
}

/* 縦書き */
.about-title p,
.about-title h2{
	writing-mode: vertical-rl;
	margin:0;
	line-height:1.6;
    font-weight:700;
}

/* 基本サイズ */
.about-title .area{
	font-size:30px;
}

.about-title .catch{
	font-size:30px;
}

/* 外壁 屋根 瓦 */
.about-title .catch .big{
	font-size:50px;
    font-weight: 600;
}

/* やるやん */
.about-title .brand{
	font-size:30px;
}

.about-title .brand .big-red{
	font-size:50px;
	color:#e80000;
}

.about-title .about-title p,
.about-title .about-title h2{
	writing-mode:vertical-rl;
	text-align:center;
	margin:0;
	line-height:1.3;
}

.about-title .about-title h2{
	font-size:34px;
	line-height:1.4;
}

.about-title .about-title .brand{
	color:#e50000;
	font-size:26px;
}

.about-title .about-desc p{
	line-height:2;
	margin-bottom:16px;
}


/*------------------- reason -----------------*/
.main .reason{
    margin:0 !important;
	padding:0;
	margin:0;
}

.reason .reason-box{
	background:url(./img/bg_patRed.png) center center;
	padding:120px 0 60px;
	position:relative;
}

.reason .reason-visual{
	text-align:right;
	margin-bottom:-110px;
	position:relative;
	right:100px;
	z-index:10;
}

.reason .reason-visual img{
	width:650px;
	height:auto;
}

.reason .reason-inner{
	max-width:1200px;
	margin:0 auto;
}

.reason .reason-title{
	text-align:center;
	color:#fff;
	font-size:46px;
	font-weight:700;
	margin-bottom:80px;
}

/* カードレイアウト */

.reason .reason-list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:60px;
    margin-bottom: 60px;
}

.reason .reason-list article{
	margin:0;
}

/* カード */

.reason .reason-card{
	width:360px;
	background:#fff;
	border-radius:4px;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

/* 画像 */

.reason .reason-image{
	width:100%;
	height:420px;
	overflow:hidden;
}

.reason .reason-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* 縦タイトル */

.reason .reason-card h3{
	position:absolute;
	top:0;
	right:0;
	writing-mode:vertical-rl;
	text-orientation:upright;
	background:url(./img/bg_patRed.png) center center;
	color:#fff;
	padding:25px 12px;
	font-weight:bold;
	font-size:24px;
	line-height:1.5;
	border-radius:0 0 0 4px;
}

/* テキスト */

.reason .reason-text{
	padding:24px;
	line-height:2;
	font-size:16px;
}


/*-------------------.reasonBox-----------------*/
/* みなとペイント仕様 */
.reasonBox .reasonList {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.reasonBox .reasonList li {
    padding: 0;
    width: 33%;
    width: calc(33% - 30px);
    text-align: center;
    margin: 35px 15px 0;
}

.reasonBox ul li::before,
.reasonBox ul li::after {
    content: none;
}

.reasonBox .reasonList li:nth-child(-n+3) {
    margin-top: 0;
}

.reasonBox ul li a {
    text-decoration: none;
}

.reasonList h3 {
    font-size: 20px;
    padding: 0;
    font-weight: bold;
    background: none;
    color: #111;
    padding: 0;
    margin-bottom: 0;
}

.reasonBox .thumbImg {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    /* background: #f5f5f5; */
    margin-bottom: 10px;
}

.reasonBox .thumbImg:before {
    content: '' !important;
    display: block;
    padding-top: 70%;
}

.reasonBox .thumbImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.reasonBox .thumbImg:after {
    content: url(./img/next_arrow.png);
    position: absolute;
    right: 0;
    bottom: 0;
    height: 31px;
    margin: auto;
}

.full-reasonList {
    position: relative;
    overflow: hidden;
    counter-reset: reasonlist;
}

.main .full-reasonList>li {
    width: 100%;
    padding: 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    counter-increment: reasonlist;
}

.full-reasonList li h3 {
    background: #e5007f;
}

.full-reasonList li h3:before {
    content: 'POINT ' counter(reasonlist, decimal-leading-zero);
    white-space: pre;
    background: #fff;
    border-radius: 3px;
    color: #e5007f;
    font-family: 'Akshar', sans-serif;
    font-variation-settings: "wght" 500, "wdth" 75;
    font-size: 32px;
    line-height: 1.4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 10px 10px 5px;
    margin-right: 20px;
}

.main .full-reasonList li:first-child {
    margin-top: 0;
}

.full-reasonList .thumbImg {
    width: 45%;
    float: left;
    margin-right: 30px;
}

.full-reasonList li:nth-child(2n) .thumbImg {
    float: right;
    margin: 0 0 0 30px;
}

.full-reasonList .thumbImg:after {
    content: none;
}

.full-reasonList .reasonSummary {
    /* overflow: hidden; */
}

.full-reasonList .reasonSummary h4 {
    display: inline-block;
}

.reasonSummary table {
    table-layout: fixed;
    text-align: center;
}

.reasonSummary table th,
.reasonSummary table td {
    text-align: center;
    vertical-align: middle;
}


.reasonSummary strong {
    background: linear-gradient(transparent 60%, #f8b62b 60%);
}

.reasonSummary ul {
    display: flex;
    justify-content: space-between;
}

.reasonSummary ul li {
    width: 33%;
    width: clac(33% - 5px);
    text-align: center;
    padding: 0;
}

.reasonSummary ul li i {
    color: #e5007f;
    display: block;
    margin: 0 auto 5px;
    font-size: 42px;
}

.reasonSummary img {
    max-width: 100%;
    height: auto;
}

/*-------------------.planBox-----------------*/
.planBox .inner {
    width: 1200px;
}

.planBox ul li {
    padding: 0;
}

.planBox ul li::before,
.planBox ul li:after {
    content: none;
}

.planBox .packList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.planBox .packList>li {
	width: calc(50% - 30px);
	border: #e80000 solid 10px;
	padding: 20px;
	box-sizing: border-box;
	background: #fff;
	margin-bottom: 50px;
}

.planBox .packList > li.packRoof{
	border:#002b5c solid 10px;
}

.planBox .packTtl {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
}

.packList h3 {
    font-size: 70px;
    font-weight: bold;
    width: 40%;
    background: none;
    margin-bottom: 0;
    border-top: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 8px 4px 0;
    position: relative;
    z-index: 10;
}

.packList h3 span {
    display: inline-block;
    border-radius: 4px;
    background: #e80000;
    color: #fff;
    width: 48%;
    width: calc(50% - 2px);
    text-align: center;
    line-height: 1;
    padding: 5px 0;
    margin-bottom: 3px;
}

.packList h3.packRoof span {
    background: #002b5c;
}

.packList h3 span.packRoof {
    background: #002b5c;
}

.packList .packThumb {
    position: relative;
    right: 0;
    top: 0;
    width: 57%;
    height: 165px;
    overflow: hidden;
    margin: 0;
}

.packList .packThumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.packList h4 {
    font-size: 37px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    line-height: 1.4;
}

.packList h4:before,
.packList h4:after {
    content: none;
}

.packList .priceBox {
    float: right;
    margin: 0 0 0 20px;
}

.packList .priceTxt {
    font-family: 'Akshar', sans-serif;
    font-size: 140px;
    font-variation-settings: 'wght' 700, 'wdth' 100;
    color: #e80000;
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin-bottom: 0;
    text-align: right;
}

.packList .priceTxt span {
    font-size: 100px;
}

.packList .priceTxt .unitTxt {
    font-family: 'Noto Sans JP', "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    font-size: 40px !important;
    line-height: 1;
    position: relative;
    padding-top: 15px;
    margin-left: 5px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    width: 1em;
    letter-spacing: 0.01em;
}

.packList .priceTxt .unitTxt span {
    font-size: 12px;
    position: absolute;
    display: block;
    margin: auto;
    text-align: center;
    top: 0;
    right: 0;
    left: 0;
    letter-spacing: normal;
}

.packList .optionalUl {
    margin: 30px 20px 0 0;
    line-height: 1;
    overflow: hidden;
}

.packList .optionalUl li {
    display: inline-block;
    float: none;
    border: none;
    border-radius: 5px;
    width: 90%;
    padding: 10px 5px;
    background: #004593;
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    box-sizing: border-box;
}

.packList .optionalUl li:last-child {
    margin-bottom: 0;
}

.packList .txts {
    font-size: 10px;
    margin-top: 5px;
    word-wrap: break-word;
    clear: both;
}


.packList .scoreBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.packList .scoreBox li {
    width: 33%;
    width: calc(33% - 5px);
    margin-bottom: 5px;
    padding: 0 0 10px;
    border: #002b5c solid 2px;
    border-radius: 5px;
    float: left;
    margin-right: 5px;
    text-align: center;
    background-color: #fff;
    margin: 0;
}

.packList .scoreBox li img {
    width: 16%;
}

.packList .scoreBox li h5 {
    margin-bottom: 10px;
}

.packList .scoreBox ul li:last-child {
    margin-right: 0;
}

.packList .scoreBox h5 {
    font-size: 16px;
    position: relative;
    padding-left: 0;
    margin-top: 0;
    background: #002b5c;
    border-radius: 0;
    display: block;
    color: #fff;
}



.packList .c-ribbon {
    position: absolute;
    top: -5px;
    right: 10px;
    background: #d00000
}

.packList .c-ribbon {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    width: 84px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    line-height: 1.2;
    padding: 0 2px;
    margin: 0;
    z-index: 2;
}


.packList .c-ribbon:before {
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #9b1909;
    border-right: solid 6px transparent;
}

.packList .c-ribbon:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 42px solid #d00000;
    border-right: 42px solid #d00000;
    border-bottom: 20px solid transparent;
}

.packList .c-ribbon>span {
    border-left: #f8b62b solid 1px;
    border-right: #f8b62b solid 1px;
    display: block;
    padding: 10px 0;
}


.packList .c-ribbon>span:after {
    content: '';
    border-left: #f8b62b solid 1px;
    border-right: #f8b62b solid 1px;
    display: block;
    width: 78px;
    height: 18px;
    position: absolute;
    top: 100%;
    z-index: 2;
    left: 0;
    right: 0;
    margin: auto;
}

.packList .c-ribbon .c-ribbon__strong {
    font-size: 30px;
}

.packList .c-ribbon small {
    font-size: 12px;
    line-height: 1.2;
    display: block;
}


.packList h5 {
    background: none;
    padding: 0;
    font-size: 38px;
    font-weight: bold;
}


.packList .materialImg {
    width: 25%;
    position: relative;
    overflow: hidden;
    float: left;
    margin-right: 30px;
}

.packList .materialImg:before {
    content: '' !important;
    display: block;
    padding-top: 90%;
}

.packList .materialImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    display: inline-block;
}

#menu .planBox .packList>li {
    width: 100%;
    overflow: hidden;
    padding: 30px;
    box-shadow: inset #69b1ea 0px 0px 0 10px;
    border: none;
}

#menu .packList h3 {
    font-size: 110px;
    width: 60%;
    flex-wrap: nowrap;
}

#menu .packList h3 span {
    width: 24%;
    width: calc(25% - 5px);
    line-height: 1.4;
}



#menu .packList h4 {
    display: inline-block;
    font-size: 28px;
    background: #e5007f;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.2;
    margin-right: 10px;
}

#menu .packList .optionalUl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

#menu .packList .optionalUl li {
    width: 48%;
    width: calc(50% - 10px);
    margin-bottom: 0;
}

#menu .packList .txts {
    clear: none;
    overflow: hidden;
}

#menu .packList .priceBox {
    width: 45%;
}

#menu .packList .priceTxt {
    font-size: 170px;
    line-height: 0.8;
}

#menu .packList .priceTxt span {
    font-size: 140px;
}

#menu .planBox .packTtl {
    margin-bottom: 15px;
}

#menu .packSummary table .priceTxt {
    font-size: 60px;
    line-height: 0.8;
}

#menu .packSummary table .priceTxt span {
    font-size: 50px;
}

#menu .packSummary table .priceTxt .unitTxt {
    width: auto;
}

#menu .packSummary table th,
#menu .packSummary table td {
    width: auto;
    padding: 5px;
    vertical-align: middle;
}

#menu .planBox .wPackmenu .packList>li {
    width: 48%;
    width: calc(50% - 30px);
}

#menu .wPackmenu .packList h3 {
    width: 90%;
    font-size: 70px;
}

.wPackmenu .packList .c-ribbon {
    z-index: 11;
    right: 5px;
}

#menu .wPackmenu h4 {
    display: block;
    margin: 0 0 0;
    text-align: center;
}

.main .wPackmenu .photoUL {
    margin-bottom: 0;
}

.main .wPackmenu .photoUL li span img {
    width: auto;
    height: 100%;
}


#menu .packList .c-ribbon {
    top: -5px;
    right: -135px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    width: 380px;
    padding: 3px 0;
    margin: 0;
    z-index: 11;
}


#menu .packList .c-ribbon:before,
#menu .packList .c-ribbon:after,
#menu .packList .c-ribbon>span:after {
    content: none;
}

#menu .packList .c-ribbon>span {
    border-top: #f8b62b solid 2px;
    border-bottom: #f8b62b solid 2px;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

#menu .packList .c-ribbon small {
    margin-right: 10px;
    font-size: 14px;
    z-index: 2;
}





/*--吹き出し大テキスト--*/
.main .balloonBox {
    position: relative;
    clear: both;
    margin: 0 200px 0 0;
    padding: 30px 20px;
    border-radius: 3px;
    background: #5eb62f;
    color: #fff;
}

.main .balloonBox p,
.main .balloonBox li {
    margin: 0;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.5;
    text-align: center;
}

.main .balloonBox li {
    text-align: left;
}

.main .balloonBox p strong,
.main .balloonBox li strong {
    color: #f8b62b;
}

.main .balloonBox:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #5eb62f;
    bottom: 20px;
    left: 100%;
    position: absolute;
}

.main .balloonBox.inview:before {
    content: '';
    background: url(./img/character.png) no-repeat center center;
    animation: wobble-vertical 1s ease-in-out 1;
    -webkit-animation: wobble-vertical 1s ease-in-out 1;
    width: 200px;
    height: 200px;
    position: absolute;
    right: -200px;
    bottom: -30px;
    background-size: contain;
}

.main .balloonBoxS {
    position: relative;
    clear: both;
    margin: 0 0 0 0;
    padding: 15px;
    border-radius: 3px;
    background: #f5f4eb url(./img/beige_bg.png) center center;
    color: #111;
}

.main .balloonBoxS p {
    margin: 0;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
}


.main .comMember {
    background: -webkit-gradient(linear,
            left top,
            left bottom,
            color-stop(1, #8eafd9),
            color-stop(0.2, #6696cf));
    background: linear-gradient(to bottom, #6696cf 20%, #8eafd9 100%);
    margin-bottom: 0;
    border-bottom: #fff solid 1px;
    padding: 40px 0 0;
}

.main .comMember .inner {
    /* background: url(./img/comMember_bg.png) no-repeat right bottom; */
    min-height: 256px;
    padding: 0;
    width: 1200px;
    background-size: 54% auto;
}

.main .comMember h2 {
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, .3);
}

.main .comMember p {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.4;
    margin: 30px 47% 40px 30px;
    display: block;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, .3);
}


.comAreaBox .thumbImg {
    width: 300px;
    position: relative;
    overflow: hidden;
    display: block;
    /* background: #f5f5f5; */
    margin: 0 30px 20px 0px;
    float: left;
}

.comAreaBox .thumbImg:before {
    content: '' !important;
    display: block;
    padding-top: 70%;
}

.comAreaBox .thumbImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}


/*---comIdea---*/
.main .comIdea {
    padding: 0;
}

.main .comIdea .ttl {
    margin-bottom: 3px;
}

.main .comIdea ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    justify-content: center;
}

.nocolumn .comIdea ul {
    justify-content: center;
}

.main .comIdea ul:after {
    content: none;
}

.main .comIdea li {
    float: none;
    box-sizing: border-box;
    margin: 7px;
    padding-left: 0;
    width: 182px;
}

.main .comIdea li:before,
.main .comIdea li:after {
    content: none;
}

.main .comIdea li img {
    display: block;
    margin: 0 auto;
}

.main .comIdea li span {
    position: relative;
    display: block;
    margin-bottom: 30px;
    padding: 10px 10px;
    border-radius: 6px;
    background-color: #00a0e9;
    color: #fff;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4;
}

.main .comIdea li span:after {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #00a0e9;
    content: '';
}

.main .comIdea li:first-child {
    padding-left: 0;
}


.main .emergencyBox {
    background: #eee;
    margin-bottom: 50px !important;
}

.main .emergencyBox img {
    margin: 0 35px 0 0;
}

.main .emergencyBox h3 {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    border-top: none;
    background: #e5007f;
    text-align: center;
    font-size: 36px;
}

.main .emergencyBox h3:after {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border: 200px solid transparent;
    border-top: #e5007f solid 40px;
    border-bottom-width: 0;
    content: ' ';
}

.main .emergencyBox .overflowH {
    padding-top: 60px;
}

.main .emergencyBox .tel br {
    display: none;
}


.main .meritBox {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}



.main .warryBox p,
.main .meritBox p {
    margin-top: 0;
}

.main .warryBox img {
    position: relative;
    float: left;
}

.main .meritBox img {
    float: left;
    margin-right: 30px;
}

.main .meritBox .meritTxt {
    overflow: hidden;
}

.main .meritList {
    overflow: hidden;
    padding-top: 10px;
    border-top: #111 dashed 1px;
}

.main .meritList {
    margin-bottom: 20px;
    padding-top: 5px;
    border-top: #ccc solid 1px;
}

.main .meritList li {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 5px 30px;
    border-bottom: #111 dashed 1px;
    background: none;
    font-weight: bold;
    font-size: 19px;
}

.main .meritList li {
    padding: 0 0 0 35px;
    border-bottom: #ccc solid 1px;
    font-size: 24px;
}

.main .meritList li:last-child {
    margin-bottom: 0;
}

.main .meritList>li:before,
.main .meritList>li:after {
    position: absolute;
    top: 12px;
    left: 0;
    margin: auto;
    content: '';
    vertical-align: middle;
}


.main .meritList>li:before {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #d00000;
}

.main .meritList>li:after {
    top: 17px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

.main .meritBox .diagnosisList {
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main .meritBox .diagnosisList li {
    padding: 3px 0;
    width: 24%;
    width: calc(25% - 10px);
    border-radius: 4px;
    background: #f8b62b;
    color: #111;
    text-align: center;
    font-weight: bold;
    font-size: 28px;
}

.main .meritBox .diagnosisList li:before,
.main .meritBox .diagnosisList li:after {
    content: none;
}


.main .diagnosisPoint ol {
    margin: 0;
    padding: 0;
    counter-reset: diagnosisPoint;
}

.main .diagnosisPoint ol>li {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    counter-increment: diagnosisPoint;
    line-height: inherit;
    padding: 0;
    text-align: left;
}

.main .diagnosisPoint>ol>li:before,
.main .diagnosisPoint>ol>li:after {
    content: none;
}

.main .diagnosisPoint li h3 {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0;
    border-top: none;
    background: none;
    color: #111;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}


.main .diagnosisPoint li h3:before {
    border-radius: 50px;
    background: #f99301;
    -webkit-box-shadow: inset rgba(255, 255, 255, .33) 0 0 0 4px;
    box-shadow: inset rgba(255, 255, 255, .33) 0 0 0 4px;
    color: #fff;
    content: 'ここが違う ' counter(diagnosisPoint, decimal-leading-zero);
    text-align: center;
    font-size: 22px;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: block;
    font-weight: normal;
}

.main .diagnosisPoint li h4 {
    display: inline-block;
    margin-top: 0;
}

#diagnosis .main .diagnosisPoint h3 {
    font-size: 33px;
}

#rainleaking .main .diagnosisPoint {
    display: flex;
    justify-content: space-between;
}

#rainleaking .main .diagnosisPoint li {
    width: 33%;
    width: calc(33% - 15px);
}

.main .ranking {
    margin: 20px 0 30px;
    padding: 0;
}

.main .ranking li {
    margin: 0;
    color: #d00000;
    list-style: none;
    font-weight: bold;
    font-size: 25px;
}



.main .warningChk {
    padding: 20px !important;
    background: #ffd6ed;
}

.main .warningChk img {
    margin: 0 15px 0 0;
}

.main .warningChk ul li {
    position: relative;
    margin: 0 0 0;
    padding: 0 0 0 30px;
    font-weight: bold;
    font-size: 22px;
}

.main .warningChk ul li:after {
    content: normal;
}

.main .warningChk ul li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    margin: auto;
    vertical-align: middle;
    height: 22px;
    font-style: 22px;
    line-height: 1;
    color: #e5007f;
    background: none;
}

.main .estimateFlow ol {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    counter-reset: flow;
}

.main .estimateFlow ol li {
    position: relative;
    float: left;
    margin: 15px 17px 52px 0;
    width: 152px;
    list-style: none;
    counter-increment: flow;
    height: auto;
}

.main .estimateFlow ol li:last-child {
    margin-right: 0;
}

.main .estimateFlow ol li:before,
.main .estimateFlow ol li:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: '';
    vertical-align: middle;
}

.main .estimateFlow ol li:before {
    left: -8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    border: 17px solid transparent;
    border-left: 20px solid #f8b62b;
}

.main .estimateFlow ol li:after {
    right: -10px;
    height: 16px;
    border-left: 20px solid #f8b62b;
}

.main .estimateFlow ol li:first-child:before,
.main .estimateFlow ol li:last-child:after {
    content: none;
}

.main .estimateFlow ol li h4 {
    position: absolute;
    top: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 5px;
    width: 100%;
    background: #07508e;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
}

.main .estimateFlow ol li h4:before {
    position: absolute;
    top: -178px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #f8b62b;
    content: counter(flow);
    text-align: center;
    text-align: center;
    font-size: 18px;
    opacity: inherit;
    align-items: center;
    justify-content: center;
}

.main .estimateFlow ol li h4:after {
    content: none;
}

.main .estimateFlow ol li p {
    margin-bottom: 0;
}


.main .deteriorationChk {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.main .deteriorationChk h2 {
    text-align: left;
}

.main .deteriorationChk .checkPoint {
    position: relative;
    overflow: hidden;
}

.main .deteriorationChk .checkPoint ul {
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;
}

.main .deteriorationChk .checkPoint ul li {
    float: left;
    margin: 20px 20px 0 0;
    padding: 0;
    width: 236px;
    background: none;
    text-align: left;
}

.main .deteriorationChk .checkPoint ul li:nth-child(-n + 3) {
    margin-top: 0;
}

.main .deteriorationChk .checkPoint ul li:before,
.main .deteriorationChk .checkPoint ul li:after,
.main .deteriorationChk .checkLegend ul li:before,
.main .deteriorationChk .checkLegend ul li:after {
    display: none;
}

.main .deteriorationChk .checkPoint ul li:nth-child(3n),
.main .deteriorationChk .checkLegend ul li:nth-child(3n) {
    margin-right: 0;
}

.main .deteriorationChk .checkPoint ul li .checkpointThumb {
    position: relative;
    position: relative;
    overflow: hidden;
    width: 236px;
    height: 146px;
    font-size: 13px;
}

.main .deteriorationChk .checkPoint ul li .checkpointThumb img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: auto;
}

.main .deteriorationChk .checkPoint ul li .checkTtl {
    position: relative;
    bottom: 0;
    z-index: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
    background: #07508e;
    text-align: center;
}

.main .deteriorationChk .checkPoint ul li .checkTtl h4 {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
}

.main .deteriorationChk .checkPoint ul li .checkTtl h4:before,
.main .deteriorationChk .checkPoint ul li .checkTtl h4:after {
    display: none;
}

.main .deteriorationChk .checkPoint ul li .checkTtl p {
    display: block;
    margin: 5px 0 0;
    border-radius: 5px;
    background: #fff;
    color: #d00000;
    font-size: 24px;
    line-height: 1.2;
}

.main .deteriorationChk .checkPoint ul li p {
    display: inline-block;
    margin-bottom: 0;
    font-size: 13px;
}

.main .deteriorationChk .checkPoint {
    float: right;
    margin-bottom: 0;
    width: 750px;
}

.main .deteriorationChk .checkPoint h3 {
    font-size: 24px;
}

.main .deteriorationChk .checkLegend {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 0 20px;
    border-bottom: #ccc solid 1px;
}


.main .deteriorationChk .checkLegend h3 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
    overflow: visible;
    margin: 0 20px 0 0;
    padding: 0;
    width: 124px;
    height: 124px;
    border-top: none;
    border-radius: 50%;
    background: #e5007f;
    color: #fff;
    font-size: 18px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.main .deteriorationChk .checkLegend h3 .imgLayer {
    right: 0;
    bottom: -30px;
}

.main .deteriorationChk .checkLegend ul {
    position: relative;
    overflow: hidden;
    padding: 20px 100px 20px 0;
    background: url(./img/checkLegend_arw.png) no-repeat right center;
}

.main .deteriorationChk .checkLegend ul li {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 35px 0 0;
    padding: 5px;
    width: 145px;
    border: #ccc solid 1px;
    border-radius: 3px;
    background: #fffeee;
    -webkit-box-shadow: 13px 13px 0 0 rgba(0, 0, 0, .2);
    box-shadow: 13px 13px 0 0 rgba(0, 0, 0, .2);
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}

.main .deteriorationChk .checkLegend ul li h4 {
    margin: 0 0 5px;
    padding: 0;
    border-radius: 4px;
    background: #111;
    color: #fff;
    text-align: center;
    font-size: 18px;
}

.main .deteriorationChk .checkLegend ul li h4:before,
.main .deteriorationChk .checkLegend ul li h4:after {
    content: none;
}

.main .deteriorationChk .checkLegend ul li span {
    display: block;
    color: #d00000;
    font-size: 18px;
}

.main .deteriorationChk .checkLegend ul li strong {
    font-size: 13px;
}

.main .deteriorationChk .checkLegend ul li strong span {
    display: inline-block;
    font-size: 13px;
}

.main .deteriorationChk .checkLegend {
    display: block;
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    width: 230px;
    border: none;
    text-align: center;
}

.main .deteriorationChk .checkLegend .imgLayer {
    position: inherit;
    width: 100%;
}

.main .deteriorationChk .checkLegend h3 {
    z-index: 1;
    display: block;
    float: none;
    margin: 0;
    width: auto;
    height: auto;
    border-radius: 5px;
    font-size: 20px;
}

.main .deteriorationChk .checkLegend ul {
    margin: -5px 0 0;
    padding: 15px 10px 45px 0;
    background: url(./img/checkLegend_arw02.png) no-repeat center bottom;
}

.main .deteriorationChk .checkLegend ul li {
    margin: 0 0 15px;
    width: 100%;
    height: auto;
    -webkit-box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .2);
    box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .2);
}

.main .troubleBox {
    padding: 0;
}

.main .troubleBox .floatL {
    margin-right: 50px;
}

.main .troubleBox .floatL img {
    margin-bottom: 10px;
}

.main .troubleBox .catchTxt {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 0;
    padding: 15px 0 0;
    color: #d00000;
    font-weight: bold;
    font-size: 18px;
}

.main .troubleBox .catchTxt strong {
    text-decoration: underline;
}

.main .troubleBox .catchTxt img {
    float: left;
    margin: 0 10px 0 0;
}



.main .troubleBox h5 {
    margin: 0 0 10px;
}


.main .troubleBox .catchTxt {
    clear: both;
    font-size: 24px;
}


.main .troubleBox ul li {
    padding: 0;
    background: none;
}

.main .troubleBox ul li:nth-child(3n) {
    margin-right: 0;
}

.main .troubleBox ul li:before,
.main .troubleBox ul li:after {
    content: none;
}

.main .troubleBox ul li p {
    margin-top: 0;
    padding-left: 20px;
    font-size: 14px;
}

.main .troubleBox ul li h6 {
    margin: 10px 0 0 0;
    position: relative;
    padding-left: 30px;
}

.main .troubleBox ul li h6:before {
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    margin: auto;
    vertical-align: middle;
    height: 22px;
    font-size: 22px;
    line-height: 1;
    color: #e5007f;
    background: none;
}