@charset "utf-8";

/*font load*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

.f-gothic {
	font-family: century-gothic, sans-serif;
	font-weight: 400;
	font-style: normal;
}


/*  common  */

.tu {
	font-size:17px;
	font-feature-settings: "palt";
	line-height:1.8em;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight:500;
}

@media screen and (min-width:950px) {
	.tu {
		font-size:18px;
	}
}

.tu a {
	text-decoration: none;
}

.tu a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	transition:0.5s
}

img {
	max-width:100%;
	image-rendering: -webkit-optimize-contrast;
}

.tu a img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-khtml-opacity: 1;
	-moz-opacity: 1;
	transition:0.5s
}

/*枠組み*/

.content {
    padding: 0 10px;
    position: relative;
}

.box {
	background: #FFF;
	padding: 15px 0 25px 0;
    position: relative;
    margin-top: 30px;
}


.container {
	padding-left: 25px;
	padding-right: 25px;
	box-sizing:content-box;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	max-width: 680px;
    position: relative;
}

.w-1300 {max-width: 1300px;}
.w-1000 { max-width: 1000px;}
.w-980 { max-width: 980px;}
.w-900 { max-width: 900px;}
.w-860 { max-width: 860px;}
.w-800 { max-width: 800px;}
.w-580 { max-width: 580px;}

@media screen and (min-width:950px) {
    
    .container {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.box {
		padding: 60px 0 110px 0;
        text-align: center;
		max-width: 920px;
		margin-left: auto;
		margin-right: auto;
        margin-top: 50px;
	}

    .c-d-md-flex {
        justify-content: space-between;
    }
    
    .clmn-txt {
        width: 53%;        
    }
    
    .clmn-img {
        width: 40%;
    }
    

    .w-640 { max-width: 640px;}    
}

/*----------------------------------------------------
ヘッダー
-----------------------------------------------------*/

body {
	background: #FAF9F5;
}

.lead {
	font-weight: bold;
	font-size: 15px;
	line-height: 1.6;
	padding-top: 15px;
	padding-bottom: 15px;
	letter-spacing: 0.05em;
	text-align: justify;
}

.lead p::first-letter {
	font-size: 190%;
	font-weight: bold;
	float: left;
	margin-right: 7px;
}

.lead div {
    font-weight: normal;
    padding-bottom: 10px;
    font-size: 90%;
    line-height: 1.3;
}

@media screen and (min-width:950px) {
	
	.lead {
		font-size: 16px;
        color: #FFF;
        padding: 20px 15px 10px 15px;
	}

}


/*----------------------------------------------------
文字
-----------------------------------------------------*/

.ttl-01 {
	text-align: center;
    padding-bottom: 15px;
}

.ttl-01 h2 {
	display: inline-block;
	font-size: 19px;
	border-bottom: 1px solid #1C8FCC;
	padding: 0 10px 10px 10px;
	font-weight: bold;
	color: #1C8FCC;
}

@media screen and (min-width:950px) {
    .ttl-01 {
        padding-bottom: 40px;
    }
	
	.ttl-01 h2 {
		font-size: 32px;
		padding: 0 15px 15px 15px;
	}
}

.txt-01 + .txt-01 {
    margin-top: 20px;
}

@media screen and (min-width:950px) {
  
    .txt-01 + .txt-01 {
        margin-top: 35px;
    }
  
}

.ttl-02 {
    text-align: center;
    line-height: 1.3;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 10px;
}

@media screen and (min-width:950px) {
    
    .ttl-02 {
        font-size: 22px;
        margin-bottom: 10px;
        margin-bottom: 22px;
    }
}

.caption {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    padding-top: 10px;
}

@media screen and (min-width:950px) {

    .caption {
        font-size: 14px;
    }
    
}

/*----------------------------------------------------
画像
-----------------------------------------------------*/

.img-01 {
    margin: 25px 0;
}

@media screen and (min-width:950px) {
    
    .img-01 {
        margin: 60px 0;
    }     
}

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

    .img-scroll {
        width: 100%;
        overflow-x: scroll;
    }
    
    .img-scroll img {
        max-width: 120vw;
    }
    
}

.img-border {
    border: 1px solid #ddd;
}


/*----------------------------------------------------
プロフィール
-----------------------------------------------------*/
.profile-txt {
    border-left: 3px solid #1C8FCC;
    padding: 15px 0 0 15px;
    line-height: 1.2;
    font-weight: bold;
}

.profile-txt p {
    font-size: 85%;
    padding-bottom: 0.5em;
}

.profile-txt h3 span {
    font-size: 130%;
}


@media screen and (max-width:949px) {
    .clmn-img {
        width: 80%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*----------------------------------------------------
フッター
-----------------------------------------------------*/

.btn-01 {
    text-align: center;
    margin-top: 35px;
}

.btn-01-ttl {
    font-size: 120%;
}

.btn-01 a {
    display: block;
    color: #FFF;
    font-weight: bold;
    font-size: 16px;
    background-image: linear-gradient(90deg, #2773B3, #0CB4EC);
    width: 90%;
    text-align: center;
    padding: 15px 5px;
    border-radius: 30px;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

.btn-01 a span {
    font-weight: normal;
    font-size: 80%;
}

@media screen and (min-width:950px) {
    .btn-01 {
        margin-top: 90px;
    }
    
    .btn-01 a {
        padding: 20px 0;
        width: 500px;
        border-radius: 100px;
        font-size: 20px;
        margin-top: 20px;
    }
}


.footer-text a {
    color: #555;
}

.tu {
    padding-bottom: 20px;
}

@media screen and (min-width:950px) {
 
    .tu {
        padding-bottom: 60px;
        background: url("../img/mainv-bg-wave.png") no-repeat center top;
        background-size: 1360px;
        
    }
}

    

/*----------------------------------------------------
背景
-----------------------------------------------------*/

.bg-04 {
    background: url("../img/bg-b.svg") no-repeat center top;
    background-size: 400vw auto;
    position: absolute;
    top: -50vw;
    left: 0;
    width: 100vw;
    height: 920px;
    z-index: -999;
}

.bg-03 {
    background: url("../img/bg-a.svg") no-repeat center top;
    background-size: 400vw auto;
    position: absolute;
    top: -50vw;
    left: 0;
    width: 100vw;
    height: 920px;
    z-index: -999;
}

@media screen and (min-width:950px) {
    .bg-04 {
        background: url("../img/bg-b.svg") no-repeat center top;
        position: absolute;
        top: -350px;
        left: 0;
        width: 100vw;
        height: 1334px;
        z-index: -999;
    }
    
    .bg-03 {
        background: url("../img/bg-a.svg") no-repeat center top;
        position: absolute;
        top: -350px;
        left: 0;
        width: 100vw;
        height: 1334px;
        z-index: -999;
    } 
}


/*----------------------------------------------------
キービジュアル
-----------------------------------------------------*/

.mainv {
    text-align: center;
    display: block;
    position: relative;
}
    

.mainv-bg  {
    background: url("../img/bg-a.svg") no-repeat center -5vw;
    background-size: 500vw auto;
}

.mainv-credit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mainv-credit p {
    width: 95%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    font-size: 80%;
    color: #CCC;
}

@media screen and (min-width:950px) {

    .mainv-img {
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mainv-img img {
        width: 1140px;
        max-width: 1140px;
    }
    
    .mainv-bg  {
        background: url("../img/bg-a.svg") no-repeat center 240px;
        
    }
}

/* トップへ戻るボタン */
/* styles.css */
#scrollTopButton {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}
#scrollTopButton:hover {
    opacity: .5;
}

#scrollTopButton img {
    width: 30px;
}

@media screen and (min-width:950px) {

    #scrollTopButton img {
        width: 60px;
    }

}

.logo {
    width: 117px;
}