@charset "utf-8";
/*********************
モバイル対応指定
*********************/
@media screen and (max-width: 768px) {
    /*ページレベルでの指定*/
    main{
        /****************************
        * index - TOPページ
        *****************************/
        &#index{
            & #main_visual{
                background: #ffffff;
                width: 90%;
        
                & .swiper-wrapper {

                    & .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: 21 / 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: 1.5rem; text-align: left; color: #ffffff; font-weight: bold;
                            background:rgba(62,114,185,0.7);
                        }

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

                        & .catch{
                            align-self: flex-end;
                            font-size: 1.8em; text-align: right; color: #e0592c; font-weight: bold; 
                            padding: 0.2em 0;
                            background:rgba(255,255,255,0.7);
                        }
                    }
                }
            }

            /* TOP用おしらせ */
            & #information{
                display: block;
                width: 90%;
                & article{
                    flex-basis: 100%;
                }
                & dl{
                    display: flex;
                    flex-flow: column wrap;
                    padding: 1%;
                    border: 3px solid #f5ac5d;
                    border-radius: 10px;
                    background-color: #ffffff;

                    & dd{
                        margin-left: 1em;
                    }

                }

            }

            & #products{

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

                & #top_menu{

                    & ul.gnavi_lists{
                        
                        & li{
                            flex-basis: 48%;
                        }
                    }
                }

                & .bnr{

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

                        & li{
                            flex-basis: 50%;
                            & img{ max-width: 100%;}
                        }

                    }

                }
            }

            & #bmk{
                & ul{
                    flex-flow: column wrap;
                    align-items:center;

                    & li{
                        &.messege{ flex-basis: 90%;}

                    }
                }
            }
        }
        /****************************
        * group - 京成グループ
        *****************************/
        &#group{
	        & > section{
                &#products{
                    & #group_insurance{
                        & ul{
                            display: flex;
                            flex-flow: column wrap;
                            justify-content:center;
                            align-items:center;
                        }  
                    }

                }
            }
        }

        /****************************
        * business - 法人
        *****************************/
        
        /****************************
        * individual - 個人
        *****************************/

        /****************************
        * company - 会社案内
        *****************************/
        &#company{
            & > section{

                & dl{
                    margin: auto;
                    display: flex;
                    flex-flow: column wrap;
                    justify-content:flex-start;
                    align-items:stretch;
                }

                & dd{
                    border-left: none;
                }
            }
        }
            
        /****************************
        * faq - よくある質問・お問い合わせ
        *****************************/    
        &#faq{
            /*事故に遭われてしまったら*/
            &.faq_accident{
                /*共通*/
                & .howto{
                    & ul{
                        flex-basis: 96%;
                        width:96%;
                        flex-flow: column wrap;

                        & li{
                            flex-basis: 25%;
                            padding: 0.2em 0;
                        }
                        & li.mark::before {
                            content: "↓";
                        }
                    }
                }

                /*ナビゲーション用*/
                & #navi{ 
                    & p{ width: 80%; }
                    
                    & ul{
                        flex-flow: row nowrap;
                        & li{ width: 30%;}
                    }
                }
            }
        }
        /****************************
        * mail - メールフォーム
        *****************************/
        &#mail{
            & > section{
                &#form{
                    & form{
                        & dl{
                            margin: auto;
                            display: flex;
                            flex-flow: column wrap;
                            justify-content:flex-start;
                            align-items:stretch;
                            
                            & dt{ flex-basis: 60%; max-width: 60%;}
                            & dd{ flex-basis: 80%; 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%;}
                        }
                    }

                }
            }
        }

        /****************************
        * policy - 各種方針・指針
        *****************************/
    }
}
/* @end */