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

*		{
	margin:0; text-decoration:none;
	color:#386185; list-style:none;
    font-family: tbudrgothic-std, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
::before , ::after {
	box-sizing: inherit;
}
button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

header {
	height: 60px;
    background: rgba(255,255,255);
    width: 100%;
}

nav {
	display: flex;
    padding: 10px 0 0 15px;
    background:rgba(255,255,255,0.7);
    position: fixed;
    width: 100%;
    height: 60px;
    font-size: 15px;;
    transition: all 0.3s ease-in-out 0s;
    z-index:1;
}
#logo img{
	width: 75px;
    transition: all 0.3s ease-in-out 0s;
}
nav ul{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left:40px;
}
nav li {
    padding:5px 0 0 0;
}
nav li a {
    width:130px;
    text-align:center;
    display: block;
    line-height: 45px;
    box-shadow: inset 0 0 0 0 rgba(0,160,233,0.7);
    border-radius: 10px 10px 0 0 ;
    transition: all 0.3s ease-in-out 0s;
}
nav ul li.current a,
nav ul li a:hover{
    box-shadow: inset 0 -300px 0 0 rgba(0,160,233,0.7);
    color:#fff;
}

/* スクロール時メニュースタイル */
nav.small {
    padding:0;
    height: 40px;
    background:rgba(255, 255, 255, 0.9)
}
nav li a.small {
    line-height: 35px;
}
#logo img.small {
    width: 70px;
    padding-left:15px;
    margin-left: 15px;
    margin-top:5px;
}


.icatch {
	background-image: url(img/header.png);
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 550px;
}
.icatch p {
    position: absolute;
    top: 190px;
    left: 90px;
    color: #cadef3;
    font-size: 20px;
}

section {
	max-width:900px;
	margin:120px auto;
}
h2 {
    text-align: center;
    background-color: #00a0e9;
    color: #fff;
    width: 100%;
    line-height: 35px;
    padding: 20px 0;
}
.flex {
    display:flex;
}
.center, .center2 {
    text-align: center;
}

#area-2 p{
    padding-left: 20px;
    padding-top: 7%;
    line-height: 250%;
}

dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}
dt {
    width: 30%;
    text-align: right;
    background: #e9f7ff;
    padding: 10px 30px 0 0;
    margin: 2px 0;
}
dd {
    width: 70%;
    padding: 10px 0 10px 25px;
    background: #f4fbff;
    margin: 2px 0;
}

.fadeIn {
    opacity: 0;
    transition: .5s;
    position: relative;
    top: 50px;
}

.active {
    opacity: 1;
    top:0px;
}
form span {
    color:rgb(182, 36, 36);
    adding-left: 5px;
    font-size: 0.8em;
}
form p {
    font-size: 0.8em;
    line-height: 150%;
    padding: 20px;
}

.botan {
    margin-top: 35px;
    font-size: 18px;
    background: #00a0e9;
    color: #fff;
    border: 0;
    border-radius: 25px;
    width: 160px;
    height: 50px;
    cursor: pointer;
}

footer {
	width: 100%;
    text-align: center;
    color: #fff;
    background-color: #00a0e9;
    height: 70px;
    line-height: 70px;
    font-size: 13px;
}


/* メディアクエリ */
@media screen and (max-width: 920px) {
    nav ul{
        background-color: rgba(255, 255, 255, 0.8);
        flex-wrap: inherit;
        flex-direction: column;
        transition: .3s;
        width: 100%;
        justify-content: start;
        padding:100px 0;
        position:fixed;
        right: -100%;
        font-size: 20px;
    }
    nav li a ,nav li a.small{
        width: 100%;
        box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
        line-height: 60px;
    }
    nav ul li.current a,
    nav ul li a:hover{
        box-shadow: inset 0 0 0 0 rgba(0,160,233,0);
        color:#386185;
    }

   /**************** 以下、ハンバーガーボタンのスタイリング ****************/
.btn {
    position: fixed;
    top: 10px;
    right: 15px;
    width: 45px;
    height: 45px;
    z-index: 10;
    border: 0;
    border-radius: 10px;
    background-color: #00a0e9;
    padding: 10px;
}

/***** 真ん中のバーガー線 *****/
.btn-line {
	display: block;
	position: relative;
	width: 100%;
	height: 3px;
	background-color: #ffffff;
	transition: .2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before , .btn-line::after {
	content: "";
	/* 基準線と同じ大きさと色 */
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: .5s;
}
.btn-line::before {
	transform: translateY(-11px);
}
.btn-line::after {
	transform: translateY(11px);
}
/***** メニューオープン時 *****/
.btn-line.open {
	background-color: transparent;
}
.btn-line.open::before , .btn-line.open::after {
	content: "";
	background-color: rgb(255, 255, 255);
	transition: .2s;
}
.btn-line.open::before {
	/* 上の線を傾ける */
	transform: rotate(45deg);
}
.btn-line.open::after {
	/* 上の線を傾ける */
	transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/


    .menu.open {
        right: 0;
    }

    .icatch {
        height: 500px;
        background-position:700px;
    }
    .icatch p {
        position: absolute;
        top: 190px;
        left: 90px;
        color: #cadef3;
        font-size: 20px;
    }
    section{
        width: 100%;
        margin:150px auto;
        font-size:15px;
    }
    #area-2 img {
        width: 100%;
    }
    .flex {
        flex-wrap: wrap;
    }
    h2 {
        width: 100%;
    }

    dd {
        width: 70%;
        padding:10px 20px;
    }
    dl {
        width: 100%;
    }
    .center {
        text-align: left;
        margin-bottom: 20px;
        line-height: 25px;
        font-size: 14px;
    }
    #trabelphoto img {
        width: 33%;
    }
    input , textarea{
        width: 100%;
    }
    
    nav.small{
        height: 60px;
    }
    #logo img.small{
        width:75px;
        padding: 0;
        margin-top: 10px;
    }

    p{
        padding: 20px;
    }
}

@media screen and (max-width: 800px) {
}