@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');


/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　共通（見つカル倉庫 カスタムCSS）
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 768px){
.navbar-right {
    margin-right: 0px;
}
}

.colse-20220630 {}
.open-20220701 {display:none !important;}

.yokoku {
    display:inline-block;
    border:1px solid #fff;
    border-radius: 2em ;
    color:rgba(255,184,0,1.00);
    background-color:rgba(0,0,0,0.30);
    font-weight:400;
    font-size:1.8rem;
    padding:1rem 3rem;
    min-width:23%;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

.yokoku2 {
    display:inline-block;
    border:1px solid rgba(235,170,0,1.00);
    border-radius: 2em ;
    color:rgba(235,170,0,1.00);
    font-weight:400;
    font-size:2.8rem;
    padding:1rem 3rem;
    min-width:33%;
}


body {
	font-size:12pt;
	font-family: 'Noto Sans JP', sans-serif;
}

h1 {font-weight: 600;
margin-bottom:0rem;}


    h1 img.service-logo {margin-bottom:0rem;}

h2 {
	font-weight:600;
	font-size:5rem;
	margin-bottom:5rem;
    color:rgba(100,100,100,1.00);
}
@media screen and (max-width: 991px){
    h2 {font-size:2.6rem;}
}

h3 {
    margin:3rem 0rem;
    color:rgba(200,0,0,1.00);
    text-align:center;
    font-size:2rem;
}

figcaption {
	padding-top:1rem;
	text-align:center;
	line-height:1.8rem;
}

	figcaption p {
		margin-bottom:0.50rem;
		}

.container,
.container-feild{
}

.container_mrgn-tp,
.container-feild_mrgn-tp{
	margin-top:15rem;
}

.container_mrgn-btm,
.container-feild_mrgn-btm{
	margin-bottom:15rem;
}


.navbar-brand {
    padding: 10px 15px;
}

.jumbotron .jumbotron-in .container p.lead-text{
    margin-bottom:5rem; font-weight:500;
}

@media screen and (min-width: 768px){
    .jumbotron {
        padding: 96px 0;
    }
}


@media screen and (min-width: 768px){
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-default .navbar-nav>li>a {font-size:0.8em;}
/*
    .nav>li>a {padding:15px 10px 15px 0px;}
*/
}


.lead {
    line-height: 160%;
    margin-bottom:6rem;
}

@media screen and (max-width: 767px){
    .lead {
        /* font-size:1.4rem; */
    }
}

.bg-color-gray{
    background-color: rgba(0,0,0,0.05);
    padding-top:12rem;
    padding-bottom:0.1rem;
}

.bg-color-white{
    background-color: rgba(255,255,255,1.00);
}

body.home > .jumbotron {
    background-image:url("/seino/mitsukarusoko/images/mainimage.jpg");
    background-position:50% 50%;
    background-size: cover;
    background-color:#cdcdcd;
    /* height:480px; */
    padding-top:80px; /* headerを配置するエリア */
    color:#ffffff;
}

span.ashirai-1 {
    /* 文字の下のグラデーションのライン */
        display:inline-block;
        background-image: url("/seino/mitsukarusoko/images/mitsukarusoko-ashirai.svg");
        background-repeat: no-repeat;
        background-size:110px;
        background-position: bottom 0rem left 0%;
        padding-bottom:5rem;
}

.navbar-nav>li>a.btn-header{
    margin-top:1rem;
    margin-right:1.5rem;
    padding:5px 2rem;
    color:#ffffff;
}
    @media screen and (max-width: 767px){
        .navbar-nav>li>a.btn-header{
            margin-left:1rem;
            width:33%;
        }
    }

a.btn-muryo_sodan{
color:#ffffff;
background-image: linear-gradient(90deg, rgba(255, 111, 66, 1), rgba(255, 209, 0, 1));
border-color:rgba(247, 130, 93, 1);
}
a.btn-muryo_sodan:hover,
a.btn-muryo_sodan:active {
color:#ffffff;
  background-image: linear-gradient(90deg, rgba(254, 97, 49, 1), rgba(255, 196, 0, 1));
border-color:rgba(247, 130, 93, 1);
}



.navbar-default .navbar-nav>li>a.btn-muryo_sodan:hover,
.navbar-default .navbar-nav>li>a.btn-muryo_sodan:focus {
color:#000000;
background-image: none ;
background-color:#ffffff;
}

.service-logo{
	width:60% ;
	margin-bottom:4rem;
}

    @media screen and (max-width: 767px){
	.service-logo{
		width:50%;
		margin-bottom:2rem;
	}
    }
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　こんな悩みありませんか？
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


ul.nayami {
    position: relative;
    /* グラデーションを入れる */
        background-image: url("../images/mitsukarusoko-ashirai.svg");
        background-repeat: no-repeat;
        background-size:70px;
        background-position: top 80% right 3.3rem;
}

            @media screen and (min-width: 768px) and (max-width: 991px){
            ul.nayami {height:10em;
                }
            }

            @media screen and (min-width: 992px) and (max-width: 1199px){
            ul.nayami {height:7em;
                }
            }

            @media screen and (min-width: 1200px) {
            ul.nayami {height:6em;
                }
            }



ul.nayami-1 {
    padding:3rem 6rem;
}

ul.nayami-2,
ul.nayami-3 {
    padding:2rem 6rem;
}

    @media screen and (max-width: 767px){
        ul.nayami-1 {
            padding:3rem 9rem 3rem 6rem;
        }

        ul.nayami-2,
        ul.nayami-3 {
            padding:2rem 9rem 3rem 6rem;
        }
    }


    ul.nayami:after,
    ul.nayami:after,
    ul.nayami:after{
        position: absolute;
        color:rgba(200,0,0,1.00);
        top:20%;
        right:6rem;
        font-size:4rem;
        font-weigt:300;
        
    }

        @media screen and (max-width: 767px){
            ul.nayami,
            ul.nayami,
            ul.nayami {
                    background-size:50px;
                    background-position: top 70% right 2.3rem;
            }
            
            
            ul.nayami:after,
            ul.nayami:after,
            ul.nayami:after{
                right:3rem;
            }
        }


    ul.nayami-1:after {
        content: '01';
    }
    ul.nayami-2:after {
        content: '02';
    }
    ul.nayami-3:after {
        content: '03';
    }

ul.nayami-3clum {
    margin-top:3rem;
    margin-bottom:3rem;
    padding-left:20px;
        background-image: none;
}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　見つカル倉庫　3つの特徴
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.row-tokucho{
    margin-left:0px;
    margin-right:0px;
    margin-bottom:15px;
    
}

.tokucho-no {
    font-size:4em;
    color:rgba(200,0,0,1.00);
    font-weight:200;
}

.tokucho-no span {
    display:block;
    margin:0 33%;
        padding-bottom:2rem;
    /* border-bottom:4px solid #cdcdcd; widthの長さ確認用*/
}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　ご利用の流れ
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow-box {margin-bottom:3rem;}

div.flow-box-sp {
    margin-top:6rem;
}

    ul li.flow-box-sp{
        color:rgba(200,0,0,1.00);
        font-size:1.3rem;
    }

.flow-title {
    text-align:center;
    color:rgba(200,0,0,1.00);
    margin-bottom:0;
}
.flow-body {
    text-align:center;
    font-size:1.3rem;
}

@media screen and (max-width: 767px){
    .flow-box {margin-bottom:2rem;}
    .flow-title {text-align:left;}
    .flow-body {text-align:left;}
}

p.tokucho-text{
    
}

            @media screen and (min-width: 768px) and (max-width: 991px){
            p.tokucho-text {height:10em;
                }
            }

            @media screen and (min-width: 992px) and (max-width: 1199px){
                h3.tokucho-title {height:2em;}
            p.tokucho-text {height:7em;
                }
            }

            @media screen and (min-width: 1200px) {
            p.tokucho-text {height:7em;
                }
            }


/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　よくある質問
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
dl.faq {
    padding:2rem 6rem;
}
dl.faq dt {margin-bottom:2rem; color:rgba(200,0,0,1.00);}
    dl.faq dt::first-letter {
        font-size:3rem;
        _x_display:block;
        _x_width:16rem;
        _x_backgroound-color:rgba(255,0,0,0.50);
        _o_border:1px solid rgba(255,0,0,0.50);
        _o_border-radius:50%;}
dl.faq dd {padding:0 2rem}

@media screen and (max-width:767px){
    dl.faq {padding:2rem 4rem;}
    dl.faq dt {margin-bottom:1rem;}
    dl.faq dd {padding:0 0rem}
}




/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　共通（見つカル倉庫 カスタムCSS）
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   
main ul li {
		list-style-type:'✔';				/* リストマークの種類 */
		padding-left:1rem;
}
	main ul li::marker {
	color: orange;
	}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃　フッタ
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
	padding-top:3rem;
	padding-bottom:3rem;
	background-color:orange;
	border-top:1rem solid rgba(255,123,0,1.00);
}

@media screen and (max-width: 767px){
    .footer-logo{width:50%; margin-bottom:3rem;}
}

footer .copyright {
	border-top:1px solid rgba(255,255,255,0.25);
	margin-top:1rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	font-size:0.8em;
	color:#ffffff;
}

footer ul li {
		list-style-type:none;				/* リストマークの種類 */
		font-size:0.8em;
}

footer a,
footer a:hover,
footer a:visited,
footer a:active {color:#fff;}


/* テーブル制御 */



/*  */
作ること

.col-table{
	display:table;
}

.col-tbody{
	display:table-row-group;
}

.col-thead{
	display:table-header-group;
}

.col-tfoot{
	display:table-footer-group;
}

.col-tr{
	display: table-row;
}

.col-td{
	display: table-cell;
}
 */