@charset "utf-8";
/*ページレベルでの指定*/
main{
    /****************************
    * index - TOPページ
    *****************************/
    &#index{
        display: flex;
        flex-flow: row wrap;
        justify-content:space-around;


        & #main_visual{
            background: #ffffff;
            width: 50%;

    
            & .swiper-wrapper {
                & * {text-decoration: none;}

                & .swiper-slide{
                    display: flex;
                    justify-content:center;
                    align-items: center;
                    background: #ffffff;
                }
                
                & .top_visual{
                    display: flex;
                    flex-flow: column wrap;
                    justify-content:space-between;
                    flex-basis: 100%;
                    aspect-ratio: 16 / 9;
                    max-height: 100vh;
                    margin: auto;
                    background-size:contain;
                    background-position: center;
                    background-repeat: no-repeat;


                    & .type, & .name, & .catch{ 
                        flex-basis: fit-content;
                        padding: 0 2em;
                        text-shadow: 1px 1px 2px #000000;
                    }

                    & .type{
                        align-self: flex-start;
                        font-size: 2rem; text-align: left; color: #ffffff; font-weight: bold;
                        background:rgba(62,114,185,0.6);
                    }

                    & .name{
                        align-self: flex-end;
                        font-size: 1.5rem; text-align: right; color: #ffffff;
                        background:rgba(102,102,102,0.7);
                    }

                    & .catch{
                        align-self: flex-end;
                        font-size: 2em; text-align: right; color: #e0592c; font-weight: bold; 
                        padding: 0.2em 0;
                        background:rgba(255,255,255,0.6);
                    }
                }
            }
        }
        /* TOP用おしらせ */
        & #information{
            display: inline-block;
            width: 40%;

            & article{
                flex-basis: 100%;
            }
            & h3{ margin-top: 0;}
            & dl{
                display: flex;
                flex-flow: column wrap;
                padding: 1%;
                border: 3px solid #f5ac5d;
				border-radius: 10px;
                background-color: #ffffff;
                /*background-color: rgba(245, 164, 86, 0.1);*/

                & dd{
                    text-indent: 1em;
                    word-break: break-all;
                    margin-bottom: 1em;
                }

            }

        }
        & #products{
            flex-basis: 90%;

            & .messege{
                & p{
                    display: block;
                    width: 80%;
                    margin: 1em auto 2em;
                }
            }

            & #top_menu{
				margin-top: 1%;

				& ul.gnavi_lists{
					display: flex;
					flex-flow: row wrap;
					justify-content:flex-start;

    				& li{
				    	display: flex;
						flex-basis: 31%;
				    	flex-flow: column wrap;
                        margin: 1%;
                        padding: 0;
                        background-size:cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        border-radius: 20px;

						&.gnavi_list > a{
				        	display: flex;
                            flex-basis: 100%;
                            width: 100%;
                            aspect-ratio: 2 / 1;
	                    	justify-content:center;
		                    align-items:center;
							text-decoration: none;
							font-size: 1rem;
                            font-weight: bold;
							color: white;
                            border-radius: 20px;
                            background-color: rgba(102,102,102,0.4);
                            text-shadow: 0.1em 0.1em 0.2em #000000;
                            transition: all 0.3s;

						}
						&.gnavi_list > a:hover{ 
                            font-size: 1.1rem;
                            letter-spacing: 0.05em; /* 字間の設定 */
                        }

						&.lst_top{display: none;}
						&.lst_accident{
                            background-size:auto calc(100%);
                            background-image: url(../img/tmpl/accident.png);
                            & a{
                                color: #b81232;
                                background: rgba(255, 242, 61, 0.6);
                                text-shadow: 0.1em 0.1em 0.2em #ffffff;
                            }}
						&.lst_group{
                            background-image: url(../img/tmpl/group.jpg);
                            & a{
                                background: rgba(62, 112, 185, 0.3);
                            }
                        }
						&.lst_business{
                            background-image: url(../img/tmpl/business.jpg);
                            & a{background: rgba(184, 18, 50, 0.3); }
                        }
						&.lst_individual{
                            background-image: url(../img/tmpl/individual.jpg);
                            & a{background: rgba(44, 156, 141, 0.3); }
                        }
						&.lst_company{
                            background-image: url(../img/tmpl/company.jpg);
                            /* & a{background: rgba(44, 156, 141, 0.5); } */
                        }
						&.lst_faq{
                            background-image: url(../img/tmpl/faq.jpg);
                            /* & a{background: rgba(44, 156, 141, 0.5); } */
                        }
                        &.lst_policy{ display: none;}
					}
					& ul.dropdown_lists{
						display: none;
						flex-flow: column nowrap;
					}
				}
			}

            & .bnr{

                & ul{
                    display: flex;
                    flex-flow: row wrap;
					justify-content:flex-start;
    		        align-items:center;

                    & li{
                        flex-basis: 20%;
                    }

                }

            }
        }
        
        & #bmk{
            flex-basis: 90%;

            & ul{
                display: flex;
                flex-flow: row wrap;
				justify-content:center;
    		    align-items:flex-start;

                & li{
                    &.image{
                        flex-basis: 20%;
                        text-align: center;
                    }
                    &.messege{ flex-basis: 80%;
                    
                        & p{
                            margin-bottom: 1em;
                        }
                    }

                }
            }
        }
        /* おしらせ過去一覧 */
        & #information_list{
            width: 95%;
            & article{
                flex-basis: 100%;

                &#Year_list{
                    & ul{
                        display: flex;
                        flex-flow: row wrap;
                        justify-content:flex-start;

                        & li{
                            & a{
                                display:block;padding: 0.5em; background-color: #878788; color: #ffffff;
                                border: 1px solid #000000;
                            }
                        }
                    }
                }

                &#info_list{
                    & dl{
                        padding: 0.5em;
                        border: 3px solid #f5ac5d;
                        border-radius: 10px;
                        background-color: #ffffff;

                        & dd{
                            margin-left: 1em;
                            margin-bottom: 1em;
                            word-break: break-all;
                        }
                    }
                }
            }
        }
        /* おしらせ詳細 */
        &.news {
            & .date{
                text-align: right;
            }
            & article{
                margin: 1em auto;

                &#text{
                    & p{ margin: 0.5em auto;}
                    & a{ text-decoration: underline; color: #174f9e;}
                }

                &#contact{
                    & .mail{
                        & a.btn{ padding: 1em 0.5em;}
                    }
                    & div.tel{
                    
                        & *{ text-align: center;}
                    }
                }
            }
        }
    }

    /****************************
    * group - 京成グループ
    *****************************/
    &#group{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_group.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_group{ display: block;}
                    }

                }

		    }
            
            &#products{
                & #group_insurance{
                    & div{
                        background-color: rgba(245, 164, 86, 0.1);
                        padding: 0 0 1em;
                        margin-bottom: 1em;

                        & p{ padding: 1em;}
                    }

                    & ul{
                    display: flex;
                    flex-flow: row wrap;
                    justify-content:space-around;
                    align-items:flex-start;

                        & li{
                            width: 45%;
                            & a{
                                width: 100%;
                            }

                        }
                    }  
                }

            }

	    }

    }

    /****************************
    * business - 法人
    *****************************/
    &#business{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_business.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_business{ display: block;}
                    }

                }

		    }
            &#products{
                & p{ margin: 1em 0;}
                & #lineup{

                    & dl{

/*
                        & dt{ font-size: 1.2em; font-weight: bold; background:linear-gradient(90deg, rgba(52, 53, 53, 1) 0%, rgba(232, 226, 213, 1) 100%);
 color: #ffffff; padding: 0.5em 1em;}
                        & dd{ text-indent: 1em; padding: 0.5em; margin-bottom: 1em;
                        background-color: rgba(245, 164, 86, 0.1);}
*/
                        & dt{
                            font-weight: bold; color:#ffffff;
	                        text-shadow: 0.1em 0.1em 0.2em #000000;
                            text-indent: 1em;
                            padding: 0.2em 0;
                            background:linear-gradient(90deg, rgba(52, 53, 53, 1) 0%, rgba(232, 226, 213, 1) 100%);
                            border-radius: 10px;
                        }
                        & dd{ text-indent: -1em;  padding-left: 1em; margin: 0.5em 0 1.5em 1em;}
                    }
                }
            }
        }
    }
    
    /****************************
    * individual - 個人
    *****************************/
    &#individual{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_individual.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_individual{ display: block;}
                    }

                }

		    }

            & article{
                & div{
                    display: flex;
                    flex-basis: 100%;
                    flex-flow: row wrap;
                    justify-content:flex-start;
                    align-items:flex-start;
                    
                    & h5{ margin: auto;}

                    & dl{
                        margin-top: 1em;
                        flex-basis: 45%;
                        margin: 2%;

                        & dt{
                            font-weight: bold;color:#ffffff;
	                        text-shadow: 0.1em 0.1em 0.2em #000000;
                            text-indent: 1em;
                            padding: 0.2em 0;
                            background:linear-gradient(90deg, rgba(52, 53, 53, 1) 0%, rgba(232, 226, 213, 1) 100%);
                            border-radius: 10px;
                        }
                        & dd{ text-indent: -1em;  padding-left: 1em; margin: 0.5em 0 0.5em 1em;}
                        & dd::before { content: "・"; }

                    }

                }
                & .line_yellow{ font-size: 1.3em; font-weight: bold;}


            }
        }
    }

    /****************************
    * company - 会社案内
    *****************************/
    &#company{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_company.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_company{ display: block;}
                    }

                }

		    }

            & dl{
                margin: auto;
                display: flex;
                flex-flow: row wrap;
    			justify-content:center;
    	        align-items:stretch;
            }
            
            & dt, & dd{ border-left: 1px solid #000000; border-bottom: 1px solid #000000;}
            & dt{ flex-basis: 25%; max-width: 10em; margin: 1%; padding: 0.5em; font-weight: bold;}
            & dd{ flex-basis: 70%; margin: 1%; padding: 0.5em;}

            & #greeting{
                .name{ margin: 1em 0; text-align: right;}
            }
            
            & #performance{
                display: none;
            }

            & #management{
                & dt, & dd{ border: none;}
                & dt{
                    flex-basis: 20%;
                    border-radius: 10px;
                    background-color: #174f9e;
                    color: #ffffff;
                    text-align: center;
                }
                & dd{ flex-basis: 60%;}
                & img{ display: block; margin: auto; width: 100%; max-width: 400px;}
            }
            & #standard{
                & dt, & dd{ border: none;}
                & dt{ flex-basis: 30%; max-width: 15em;}
                & dd{ flex-basis: 60%;}
            }

	    }
    }

    /****************************
    * faq - よくある質問・お問い合わせ
    *****************************/
    &#faq{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_faq.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_faq{ display: block;}
                    }

                }

		    }

            & article.accident{
				display: flex;
				flex-basis: 90%;
                width:90%;
			   	flex-flow: column wrap;
                margin: 1% auto;
                padding: 0;
                background-size:auto calc(100%);
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 20px;
                background-image: url(../img/tmpl/accident.png);

                & > a{
                    display: flex;
                    flex-basis: 100%;
                    width: 100%;
                    aspect-ratio: 5 / 1;
                    justify-content:center;
                    align-items:center;
                    text-decoration: none;
                    font-size: 1.5rem;
                    font-weight: bold;
                    color: #b81232;
                    border-radius: 20px;
                    background: rgba(255, 242, 61, 0.6);
                    text-shadow: 0.1em 0.1em 0.2em #ffffff;
                    transition: all 0.3s;
                    border: 2px solid #b81232;
                }
            }

            & #contact{
                & .mail{
                    & a.btn{ padding: 1em 0.5em;}
                }
                & div.tel{
                
                    & *{ text-align: center;}
                }
            }
        }

        /*事故に遭われてしまったら*/
        &.faq_accident{
            /*共通*/
            & .howto{
                & p{ text-align: center;}
                & ul{
                    display: flex;
                    flex-basis: 90%;
                    width:90%;
                    margin: 0.5em auto;
                    padding: 0.5em;
                    flex-flow: row wrap;
                    justify-content:space-around;
                    align-items:center;
                    border: 3px solid #b81232;

                    & li{
                        display: flex;
                        align-items:center;
                        padding: 0.5em;
                        text-align: center;
                    }

                    & li.mark::before {
                        content: "→";
                    }
                }
            }

            & table{
                & td{ text-align: center;}
            }

            /*ナビゲーション用*/
            & #navi{
                & p{ font-size: 2em; color: #b81232; text-align: center; width: 50%; margin: auto; padding: 0.5em; border: 3px solid #2c9c8d; border-radius: 20px; }
                & ul{
                    padding: 0 0.5em;
                    border: none;
                    & li{
                        border: none;
                        padding: 0;
                        flex-basis: 30%;

                        & a{
                            display: flex;
                            aspect-ratio: 2.5 / 1;
                            flex-basis: 100%;
                            text-align: center;
                        }

                    }
                }
            }
        }
    }

    /****************************
    * mail - メールフォーム
    *****************************/
    &#mail{
	    & > section{
            &#form{
                & form{
                    & dl{
                        margin: auto;
                        display: flex;
                        flex-flow: row wrap;
                        justify-content:center;
                        align-items:stretch;
                        
                        & dt, & dd{ border-left: 1px solid #000000; border-bottom: 1px solid #000000;}
                        & dt{ flex-basis: 30%; max-width: 13em; margin: 1%; padding: 0.5em; font-weight: bold;}
                        & dd{ flex-basis: 65%; margin: 1%; padding: 0.5em;}

                        & a{ color: #174f9e; text-decoration: underline;}
                    }
                    
                    & p.send_box{
                        display: flex;
                        flex-basis: 50%;
                        width:50%;
                        margin: auto;
                        flex-flow: row wrap;
                        justify-content:space-between;

                        .btn{ padding: 0.25rem; flex-basis: 30%;}
                    }

                    & p#submit{
                        display: none;
                        text-align: center;
                    }
                    
                    & input[type="text"],
                    & input[type="date"],
                    & input[type="email"],
                    & input[type="tel"],
                    & input[type="number"],
                    & input[type="password"],
                    & textarea{
                        width: 100%;
                    }
                    
                    & input[type="text"].p-postal-code{ width: auto;}
                }

            }
        }
    }
    /****************************
    * policy - 各種方針・指針
    *****************************/
    &#policy{
	    & > section{
            &#pagemenu{
                & #title{
                    background-image: url(../img/tmpl/ttl_policy.jpg);

                    & > ul.gnavi_lists{
                       /* background: linear-gradient(90deg, rgba(62, 112, 185, 1) 0%, rgba(255, 255, 255, 0.5) 100%); */
    
                        & .lst_policy{ display: block;}
                    }

                }

		    }
            
            /* お客様本位の業務運営に関する方針 */
            &#co{
                & h4, & h5{ text-align: left;}
                & dl{
                    margin-left: 1em;
                    & dt{ font-weight: bold;}
                    & dd{ text-indent: -1em;  padding-left: 1em; margin: 1em 0 1em 1em; }
                    & dd::before { content: "・"; }
                }

            }
            /* 勧誘方針・推奨方針 */
            &#sr{
                & ul{
                    margin-left: 1em;
                    & li{ text-indent: -1em;  padding-left: 1em; margin: 1em 0 1em 1em; }
                    & li::before { content: "・"; }
                }

            }
            
            /* プライバシーポリシー */
            &#privacy{
                & dl{
                    margin-left: 1em;
                    & dt{ font-weight: bold;}
                    & dd{ margin: 1em;
                        & dd{ text-indent: -1em;  padding-left: 1em; }
                        & dd::before { content: "・"; }

                        & ul{
                            margin-left: 1em;
                            & li{ text-indent: -1em;  padding-left: 1em; margin: 1em 0 1em 1em;}
                            & li::before { content: "・"; }
                        }
                        .company{
                            & dd::before { content:none; }
                            & ul{
                                margin-left: 0;
                                & li{ text-indent: 0;  padding-left: 0; margin: 1em 0;}
                                & li::before { content:none; }
                            }
                        }
                    }
                }

            }

            /* サイト利用規約・クッキーポリシー */
            &#site, &#cookie{
                
                & p.txt_box{
                    margin: 1em;
                    text-indent: 1em;
                }


                & dl{
                    margin-left: 1em;
                    & dt{ font-weight: bold;}
                    & dd{ margin: 1em;
                        & dd{ text-indent: -1em;  padding-left: 1em; }
                        & dd::before { content: "・"; }

                        & ul{
                            margin-left: 1em;
                            & li{ text-indent: -1em;  padding-left: 1em; margin: 1em 0 1em 1em;}
                            & li::before { content: "・"; }
                        }
                        .company{
                            & dd::before { content:none; }
                            & ul{
                                margin-left: 0;
                                & li{ text-indent: 0;  padding-left: 0; margin: 1em 0;}
                                & li::before { content:none; }
                            }
                        }
                    }
                }

            }
        }
    }
}
/* @end */