@charset "utf-8";
/* CSS Document */


/* □ about
-------------------------------- */
#about{
}
	#about h3{
		margin-bottom:30px;
	}
	#about p{
		line-height:1.8;
	}
/* □ greeting
-------------------------------- */
#greeting{
}
		
	#greeting h3{
		margin-bottom:30px;
	}
		
	#greeting .subsection{
	}
		
	#greeting .subsection p.ceo{
		float:left;
		padding-left:30px;
	}
		
	#greeting .subsection dl{
		float:right;
		width:580px;
		padding-right:30px;
		
	}
		
	#greeting .subsection dl dt{
		font-size:180%;
		margin:15px 0 30px;
		color: #005BAC;
	}
		
	#greeting .subsection dl dd{
		line-height:1.8;
	}
		
	#greeting .subsection dl dd.ceoname{
		text-align:left;
		padding-top:30px;
		font-size:133%;
		font-weight:700;
		float: right;
		line-height: 2.5;
	}
	#greeting .subsection dl dd.ceoname ul li.date{
		font-size:77%;
		font-weight:100;
	}
	#greeting .subsection dl dd.ceoname img{
		margin-left:10px;
		vertical-align:bottom;
	}
		
/* □ company
-------------------------------- */
#company{
	background:#e4f1ff;
	padding:30px 0;
}
		
	#company .subsection{
		width:960px;
		margin:auto;
		
	}
	#company .subsection h3{
		margin-bottom:30px;
	}
		
	#company .subsection p.images{
		float:left;
	}
		
	#company .subsection table{
		float:right;
		padding-left:30px;
		width:580px;
		table-layout:fixed;
	}
		
	#company .subsection table tr,
	#company .subsection table th,
	#company .subsection table td{
		border:1px solid #004ea2;
		padding:1em;
	}
		
	#company .subsection table th{
		width:10em;
		background:#2775ca;
		color:#fff;
		text-align:center;
	}
	#company .subsection table td{
		background:#fff;
		padding-left:2.5em;
	}
		
		
		
	#company .subsection div.map{
		clear:both;
		padding-top: 20px;
	}
		
	#company .subsection div.map iframe{
		margin-bottom:0;
	}
		
	#company .subsection div.map p.googlemap{
		text-align:right;
	}

/* □ aozora
-------------------------------- */
#aozora{
    background:#fff;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(226,241,246,1) 100%);
    padding:79px 0 86px 0;
}

    #aozora p,
    #aozora ul.list > li{
        font-family: 'Kosugi Maru', sans-serif;
        font-size: 169%;
        color: #402F1D;
    }

    #aozora h3{
        text-align: center;
        margin-bottom: 61px;
    }
    #aozora h3 .logo{
        display: block;
        margin-bottom: 41px;
        text-align: center;
    }
    #aozora h3 img{
        display: block;
        margin: 0 auto;
    }
    #aozora h3 img + img{
        margin-top: 43px;
    }

    #aozora h4{
        text-align: center;
        margin-bottom: 26px;
    }
    #aozora h4 img{
        display: block;
        margin: 0 auto;
    }

    #aozora .images{
        display: flex;
        text-align: center;
        justify-content: center;
        margin-bottom: 82px;
    }

    #aozora .images li + li{
        margin-left: 24px;
    }
    #aozora .images li img{
        max-width: 100%;
        flex: 1;
    }

    #aozora p.lead{
        text-align: center;
        margin-bottom: 61px;
        line-height: 2;
    }
    #aozora .mv{
        margin-bottom: 108px;
    }

    #aozora .mv img{
        width: 100%;
    }
    #aozora .wrap{
        background: url("../../images/about/aozora_background.png") 50% 0 no-repeat;
    }

    #aozora .attractiveness{
        padding: 0 59px;
        margin-bottom: 131px;
    }

        #aozora .attractiveness h5{
            margin-bottom: 42px;
            text-align: center;
            background: url("../../images/about/aozora_decoration.png") 50% 50% no-repeat;
        }

        #aozora .attractiveness ul.list{

        }

        #aozora .attractiveness ul.list > li{
            background:0 0 no-repeat;
            padding-left: 109px;
            min-height: 90px;
            box-sizing: border-box;
        }

        #aozora .attractiveness ul.list > li + li{
            margin-top: 50px;
        }

        #aozora .attractiveness ul.list > li.no1{
            background-image: url("../../images/about/attractiveness_icon1.png");
        }
        #aozora .attractiveness ul.list > li.no2{
            background-image: url("../../images/about/attractiveness_icon2.png");
        }
        #aozora .attractiveness ul.list > li.no3{
            background-image: url("../../images/about/attractiveness_icon3.png");
        }

        #aozora .attractiveness ul.list > li > dl > dt{
            display: flex;
            align-items: center;
            height: 90px;
            margin-bottom: 24px;
        }
        #aozora .attractiveness ul.list > li > dl > dd{
            line-height: 2;
        }

        #aozora .attractiveness ul.list > li > dl > dd > ul li:before{
            display: inline-block;
            content: "〇";
        }
        #aozora .attractiveness ul.list > li > dl > dd > ul li{
            display: flex;
            flex: 1;
            position: relative;
            
        }
        #aozora .attractiveness ul.list > li > dl > dd > ul li + li{
            margin-top: 1em;
            
        }


    #aozora .access{
        margin-bottom: 86px;
        padding-bottom: 0;
    }

        #aozora .access h5{
            margin-bottom: 42px;
            text-align: center;
            background: url("../../images/about/aozora_decoration.png") 50% 50% no-repeat;
        }
        #aozora .access .map{
        }
        #aozora .access .map iframe{
            width: 100%;
            height: 400px;
        }
        #aozora .access .map p{
            margin: 0;
            font-size: 138%;
        }

    #aozora .contact{
        background: #fff;
        border-radius: 20px;
        padding: 60px 10px;
        text-align: center;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);
    }

        #aozora .contact h5{
            margin-bottom: 34px;
            text-align: center;
        }

        #aozora .contact .tel{
            margin-bottom: 24px;
            text-align: center;
        }
        #aozora .contact .tel a{
            text-decoration: none;
            pointer-events: none;
            cursor: default;
        }
        #aozora .contact .time{
            margin-bottom: 52px;
            text-align: center;
            font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
            font-size:1.8rem;
            font-weight: 700;
        }

        #aozora .buttonStyle{
            text-align: center;
        }

        #aozora .buttonStyle a{
            position: relative;
            z-index:0;
            box-sizing: border-box;
            display:inline-block;
            width: 632px;
            padding:35px 10px;
            color:#fff;
            text-decoration:none;
            border-radius:80px;
        }
        #aozora .buttonStyle a:before{
            position:absolute;
            z-index:-1;
            top:0;
            left:0;
            content:"";
            width:100%;
            height:100%;
            transition: 0.5s;
            border-radius:80px;
            background: #52B77A;
            background: -moz-linear-gradient(left, #5BAFCD 0%, #52B77A 100%);
            background: -webkit-gradient(linear, left center, right center, from(#5BAFCD), to(#52B77A));
            background: -webkit-linear-gradient(left, #5BAFCD 0%, #52B77A 100%);
            background: -o-linear-gradient(left, #5BAFCD 0%, #52B77A 100%);
            background: linear-gradient(to right, #5BAFCD 0%, #52B77A 100%);
        }
        #aozora .buttonStyle a:after{
            position:absolute;
            z-index:-2;
            top:0;
            left:0;
            content:"";
            width:100%;
            height:100%;
            border-radius:80px;
            background: #4AD981;
        }
        #aozora .buttonStyle a:hover:before{
            opacity:0;
        }

        #aozora .buttonStyle a img{
            display: inline-block;
            vertical-align: middle;
        }
/*
        #aozora .buttonStyle a span:before{
            display: inline-block;
            content: "";
            background: url("../../images/about/mail.svg") 0 50% no-repeat;
            background-size: auto 100%;
            width: 1.3em;
            height: 1em;
            margin-right: 10px;
            vertical-align: middle;
        }
*/

/* □ info
-------------------------------- */
section#info{
	background:url(../../images/common/footer/bg.jpg) center center repeat-x ;
	background-size:cover;
	padding-top:60px;
}

	section#info div.infoBox{
		width:960px;
		margin:30px auto;
		text-align:center;
		padding:40px 0;
		background-color:rgba(255,255,255,0.6);
		
	}
	
	section#info div.infoBox dl dt{
		font-weight:bold;
		padding-bottom:40px;
	}
	
	section#info div.infoBox dl dd{
		color:#333;
		font-weight:700;
		
	}
	
	section#info div.infoBox dl dd.official{
		display:inline-block;
		padding:0 15px;
	}
	
		
@media only screen and
(max-width : 640px) {
/* □ greeting
-------------------------------- */
#greeting{
}
		
	#greeting h3{
		margin-bottom:30px;
	}
		
	#greeting .subsection{
	}
		
	#greeting .subsection p.ceo{
		float:none;
		padding-left:0;
		text-align:center;
	}
		
	#greeting .subsection dl{
		float:none;
		width:100%;
		padding-right:0;
		
	}
		
	#greeting .subsection dl dt{
		font-size:180%;
		margin:15px 0 30px;
	}
		
	#greeting .subsection dl dt img{
		width:100%;
		max-width:100%;
	}
		
	#greeting .subsection dl dd{
		line-height:1.8;
	}
		
	#greeting .subsection dl dd.ceoname{
		padding-top:10px;
		font-size:117%;
		font-weight:700;
		line-height: 1.5;
	}
		
/* □ company
-------------------------------- */
#company{
	background:#e4f1ff;
	padding:30px 0;
}
		
	#company .subsection{
		width:auto;
		margin:auto;
		padding:3%
		
	}
	#company .subsection h3{
		margin-bottom:30px;
	}
		
	#company .subsection p.images{
		float:none;
	}
		
	#company .subsection p.images img{
		width:100%;
		max-width:100%;
	}
		
	#company .subsection table{
		float:none;
		padding-left:0;
		width:100%;
		table-layout:fixed;
	}
		
	#company .subsection table tr,
	#company .subsection table th,
	#company .subsection table td{
		border:1px solid #004ea2;
		padding:0.5em;
		display:block;
	}
	#company .subsection table tr{
		border:none;
		padding:0;
	}
	#company .subsection table th{
		width:auto;
		background:#2775ca;
		color:#fff;
		text-align:center;
	}
	#company .subsection table td{
		background:#fff;
		padding-left:0.5em;
	}
		
	#company .subsection table td span{
		display:block;
	}
		
	#company .subsection table td span.tel-link{
		display:inline-block;
	}
		
		
	#company .subsection div.map{
		clear:both;
		padding-top: 20px;
	}
		
	#company .subsection div.map iframe{
		margin-bottom:0;
	}
		
	#company .subsection div.map p.googlemap{
		text-align:right;
	}

/* □ aozora
-------------------------------- */
#aozora{
    padding:14vw 8vw 14vw 8vw;
}

#aozora img{
    max-width: 100%;
}

    #aozora p,
    #aozora ul.list > li{
        font-family: 'Kosugi Maru', sans-serif;
        font-size: 1.8rem;
    }

    #aozora h3{
        text-align: center;
    }
    #aozora h3 img + img{
        margin-top: 14vw;
    }

    
    #aozora h4{
        margin-bottom: 8vw;
    }
    
    #aozora .images{
        flex-wrap: wrap;
        justify-content:space-around;
        margin-bottom: 14vw;;
    }

    #aozora .images li{
        width: 46%;
        margin-bottom: 2vw;
    }
    
    #aozora .images li + li{
        margin-left: 0;
    }
    
    #aozora p.lead{
        text-align: left;
        margin-bottom: 8vw;
        line-height: 2;
    }
    #aozora .mv{
        margin-bottom: 16vw;
        margin-left: -8vw;
        margin-right: -8vw;
    }

    #aozora .wrap{
        background-position: 280px 0;
        background-size: 520%;
    }

    #aozora .attractiveness{
        padding: 0;
        margin-bottom: 16vw;
    }

        #aozora .attractiveness h4{
            margin-bottom: 12vw;
            text-align: center;
            background-size:100%;
            padding-left: 12vw;
            padding-right: 12vw;
        }

        #aozora .attractiveness ul.list{
        }

        #aozora .attractiveness ul.list > li{
            padding-left: 0;
            min-height: 1.8;
            background: none!important;
            text-align: center;
        }
        #aozora .attractiveness ul.list > li:before{
            display: inline-block;
            content: "";
            margin: 0 auto 8vw auto;
        }
        #aozora .attractiveness ul.list > li.no1:before{
            content: url("../../images/about/attractiveness_icon1.png");
        }
        #aozora .attractiveness ul.list > li.no2:before{
            content: url("../../images/about/attractiveness_icon2.png");
        }
        #aozora .attractiveness ul.list > li.no3:before{
            content: url("../../images/about/attractiveness_icon3.png");
        }

        #aozora .attractiveness ul.list > li + li{
            margin-top: 17vw;
        }

        #aozora .attractiveness ul.list > li > dl > dt{
            display: flex;
            align-items: center;
            height: auto;
            margin-bottom: 8vw;
        }
        #aozora .attractiveness ul.list > li > dl > dt img{
            height: 3.8em;
        }
        #aozora .attractiveness ul.list > li > dl > dd{
            line-height: 2;
            text-align: left;
        }
    
        #aozora .attractiveness ul.list > li > dl > dd > ul li{
            line-height: 2;
        }

        #aozora .attractiveness ul.list > li > dl > dd > ul li + li{
            margin-top: 0.8em;
        }
        #aozora .attractiveness .map{
        }
        #aozora .attractiveness .map iframe{
            width: 100%;
            height: 80vw;
        }
        #aozora .attractiveness .map p{
            margin: 0;
            font-size: 100%;
        }
    

    #aozora .access{
        margin-bottom: 16vw;
    }

        #aozora .access h5{
            margin-bottom: 8vw;
            text-align: center;
            background-size:100%;
            padding-left: 12vw;
            padding-right: 12vw;
        }
        #aozora .access .map{
        }
        #aozora .access .map iframe{
            width: 100%;
            height: 80vw;
        }
        #aozora .access .map p{
            margin: 0;
            font-size: 100%;
        }

    #aozora .contact{
        padding: 10vw 4vw;
    }

        #aozora .contact h5{
            margin-bottom: 5.8vw;
            text-align: center;
        }

        #aozora .contact .tel{
            margin-bottom: 4.3vw;
            text-align: center;
        }
        #aozora .contact .tel a{
            pointer-events:all;
            cursor:pointer;
        }
        #aozora .contact .time{
            margin-bottom: 8vw;
            text-align: center;
            font-size:1.6rem;
        }

        #aozora .buttonStyle{
            text-align: center;
        }

        #aozora .buttonStyle a{
            width: 100%;
            padding:25px 30px;
        }
        #aozora .buttonStyle a span{
        }
    /*
        #aozora .buttonStyle a span img{
            width: calc(100% - 2em);
        }
        #aozora .buttonStyle a span:before{
            height: 0.8em;
            margin-right: 3px;
        }
    */

    
/* □ info
-------------------------------- */
section#info{
}

	section#info div.infoBox{
		width:100%;
		margin:30px auto;
		text-align:center;
		padding:40px 0;
		background-color:rgba(255,255,255,0.6);
		
	}
	
	section#info div.infoBox dl dt{
		font-weight:bold;
		padding-bottom:40px;
	}
	
	section#info div.infoBox dl dd{
		padding-bottom:20px;
		
	}
	
	section#info div.infoBox dl dd img{
		width:100%;
		padding-bottom:20px;
	}
	
	section#info div.infoBox dl dd.official{
		display:inline-block;
		padding:0 15px;
	}
	
}