@charset "UTF-8";

/*------------------------------------------------
					common
------------------------------------------------*/
.row {
	text-align:center;
	width:100%;
    max-width:1000px;
	box-sizing:border-box;
	margin:0 auto;
}

.btn {
    background:#1eaaff;
    font-size:18px;
    border-radius: 50px;
    padding:15px 0;
    color:#fff;
    box-shadow: 2px 4px 2px rgba(0,0,0,.5);
}
.btn:hover {
    color:#1eaaff;
    background:#fff;
    letter-spacing: 2px;
}

/*------------------------------------------------
					header
------------------------------------------------*/
header {
    background:#1eaaff;
}
header h1 {
    text-align: center;
    padding:20px 0;
}

.visual {
    background:url('../img/bg.jpg') repeat;
    text-align: center;
    padding:5% 0;
}





/*------------------------------------------------
--------------------------------------------------
				contents start
--------------------------------------------------
------------------------------------------------*/
.contents {
    background:#f5eee8;
}

.contents .text {
    font-weight: 500;
    font-size:16px;
    padding:6% 0;
    line-height: 34px;
}
.contents .text span {
    font-weight: 400;
    font-size:16px;
    display:block;
}


.present {
    border-bottom: 6px solid #000;
    padding:20px 0;
}
.present h2 {
    position:relative;
    background:#f5eee8;
}
.present h2:before, .present h2:after {
    content:'';
    position:absolute;
    top:10px;
    background:#000;
    width:34%;
    height:6px;
}
.present h2:before {
    left:0;
}
.present h2:after {
    right:0;
}
.present ul {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:5% 0 3%;
}
.present ul li:nth-child(2) {padding-right:2%;}

.present .textbox li {
    font-weight: 500;
    font-size:16px;
    width:49%;
    text-align: left;
    line-height: 32px;
}
.present .textbox li:last-child {
    padding-left:20px;
    padding-right:0;
    text-align: center;
}

.andbtn {
    text-align: center;
    padding:5% 0 4%;
}

#pre2 .present ul li:nth-child(2) {
    text-align: left;
}


/*turn wrap*/
.turn-wrap {
    padding:6% 0;
}
.turn-wrap ul {
    display:flex;
    justify-content: space-between;
}
.turn-wrap ul li {
    width:48%;
    border-bottom: 3px solid #1eaaff;
    padding:0 0 6%;
}

.ttl {
    position:relative;
    padding:0 0 9%;
}
.ttl h2 {
    font-size:35px;
    font-weight: 500;
}
.ttl h2:before, .ttl h2:after {
    content:'';
    position:absolute;
    top:25px;
    background:#1eaaff;
    width:32%;
    height:3px;
}
.ttl h2:before {
    left:0;
}
.ttl h2:after {
    right:0;
}
.turn-wrap p {
    padding:0 0 10%;
    font-size: 24px;
    font-weight: 500;
    line-height: 48px;
}
.turn-wrap .btn {margin:0 30px;}

.turn-wrap .txt p {
    text-align: center;
    font-size:18px;
    line-height: 30px;
    padding:0 0 40px;
}
.turn-wrap .txt p span {
    display:block;
    font-size:14px;
    text-align: left;
    padding:20px 0 0;
}
.turn-wrap .txt .last {
    padding:40px 0 0;
}

.contents .text2 {
    font-size:18px;
    font-weight: 500;
    text-align: left;
    line-height: 34px;
    padding:8% 6% 5%;
}
.contents .text2 a {
    text-decoration: underline;
    color:#ff5a00;
    display:inline-block;
}
.contents .text2 a:hover {
    color:#1eaaff;
}


/*------------------------------------------------
					footer
------------------------------------------------*/
article .orange {
    background:#ff5a00;
    color:#fff;
    font-size:20px;
    font-weight: 400;
    text-align: center;
    padding:20px 0;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}
article .orange:hover {
    background:#1eaaff;
    letter-spacing: 2px;
}



/*------------------------------------------------
					responsive
------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .visual {
        padding:50px 30px;
    }
    
    .contents .text {
        text-align: left;
        padding:6% 30px;
    }
    .contents .text br {display:none;}
    .present h2:before, .present h2:after {width:30%;}
    
}

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


@media screen and (max-width: 600px) {
    h1 img {width:90%;}
    article {padding:0 0 30px;}
    .present h2:before, .present h2:after {width:24%;}
    .present ul {flex-wrap:wrap;padding:60px 30px 0;}
    .present ul li, .present .textbox li {width:100%;margin:0 auto 30px;}
    .present ul li:last-child {margin:0;}
    .present .textbox {padding:30px;}
    .present .textbox li:last-child {padding:0;}
    .andbtn img {width:20%;padding:50px 0;}
    .turn-wrap ul {flex-wrap:wrap;padding:30px;}
    .turn-wrap ul li {width:100%;margin:0 auto 80px;padding:0 0 20%;}
    .ttl h2:before, .ttl h2:after {width:20%;}
    .turn-wrap ul li:last-child {margin:0}
    
    
    .contents .text2 {font-weight: 400;padding:8% 6% 21%;}
    article .orange {border-radius: 50px;box-shadow: 2px 4px 2px rgba(0,0,0,.4);width:80%;left:10%;font-size:16px;bottom:20px;}
    .ttlimg {width:40%;}
}