body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
    font-weight: 400;
	color: #222;
	min-width:100%;
	-webkit-text-size-adjust: 100%;
    line-height: 160%;
}
iframe, video, img { border: none; vertical-align:bottom;}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style:none;
    font-size: 100%;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../img/spacer.gif); /* AndroidページのP要素の隙間対策 */
}
h1, h2, h3, h4, h5, b { font-weight: 700;}
iframe { border: none;}
a:link {color:#2F8CE8; outline:none; }
a:visited {color:#2F8CE8;}
a[href^="tel:"] { text-decoration:none; pointer-events:none ; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}
img { max-width: 100%; height: auto;}
#wrapper {overflow: hidden;}
#base { position: relative; left: 0; transition: all .3s;}
.inner { margin: auto; width: 90%; max-width: 1110px;}

.pc { display:block;}
.pctb { display:block;}
.tb { display:none;}
.tbsp { display:none;}
.sp { display:none;}

@media only screen and (min-width:768px){
    a:hover {color: #333;}
    a:hover img { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
}
@media only screen and (max-width:768px){
    .pc { display:none;}
    .pctb { display:block;}
    .tb { display:block;}
    .tbsp { display:none;}
    .sp { display:none;}
}
@media only screen and (max-width:468px){
    body { min-width:100%;}
    .pc { display:none;}
    .pctb { display:none;}
    .tb { display:none;}
    .tbsp { display:block;}
    .sp { display:block;}
}


/* =========================================================================================
Layout
=========================================================================================*/
#wrapper{
    position:relative;
}
#container{
}
article {
}
section {
}
.inner {
    position:relative;
    margin: 0 auto;
    padding: 100px 0;
    width: 96%;
    max-width: 1200px;
    box-sizing:border-box;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
}



/*====================================================================================================
  HEADER
====================================================================================================*/
#header {
    width: 100%;
    background: url("../../img/mainimg_bg.png") no-repeat;
    background-size: cover;
}
#header .inner {
    position: relative;
    height: 800px;
}
#header .inner::before {
    display:block; clear: both; content:"";
    position: absolute; bottom:-50px; left:0; right: 0; z-index:10;
    width: 100%; height:auto;
    aspect-ratio: 346 / 260;
    max-width:100px;
    background: url("../../img/mainimg_fish3.png") no-repeat;
    background-size: 100% auto;
}
#header .logo {
    position: absolute; top:0; bottom: 0; left: 0; z-index:10;
    margin: auto;
    width: 69%; height: auto; max-width: 690px;
    aspect-ratio: 691 / 523;
}
#header .ryoma {
    position: absolute; top:10%; right:5%; z-index:10;
    width: 28%; height: auto; max-width: 287px;
    aspect-ratio: 458 / 1179;
}
#header .ryoma img {
    position: relative; z-index:10;
}
#header .ryoma::before,
#header .ryoma::after {
    display:block; clear: both; content:"";
    position: absolute;
    width: 100%; height: auto;
    background-size: 100% auto !important;
}
#header .ryoma::before {
    left: -190px; top: 70px;
    width: 88%; max-width: 245px;
    aspect-ratio: 362 / 234;
    background: url("../../img/mainimg_fish1.png") no-repeat;
}
#header .ryoma::after {
    right: -150px; top:200px;
    width: 88%; max-width: 240px;
    aspect-ratio: 355 / 293;
    background: url("../../img/mainimg_fish2.png") no-repeat;
}
@media only screen and (max-width:768px){
    #header .inner { height: 600px;}
    #header .logo { left:5%; width: 55%;}
    #header .ryoma::before { left:-45%; top:15%; width: 70%;}
    #header .ryoma::after { right:-25%; top:40%; width: 70%;}
}
@media only screen and (max-width:468px){
    #header .inner { height: 550px; }
    #header .inner::before { right:inherit; top:inherit; left: 20px; bottom: 50px; max-width:70px;}
    #header .logo { top: 7%; bottom: inherit; left:0; right: 0; margin: auto; width: 80%;}
    #header .ryoma { top: inherit; bottom:10%; right:0; left: 0; margin: auto; width: 30%;}
    #header .ryoma::before { left:-65%; top:15%; width:100%;}
    #header .ryoma::after { right:-60%; top:40%; width:100%;}
}



/*====================================================================================================
  CONTENT
====================================================================================================*/
#container { clear:both; width:100%;}
#container　.contents {}


/* About */
#about { position: relative;}
#about .inner { padding-top: 200px; padding-bottom:200px;}
#about::before {
    display:block; clear: both; content:"";
    position: absolute; top:-100px; left: 0; right: 0; z-index: 9;
    width:100%; height:101px; max-width:1500px; 
    background:url("../../img/wave_w.png") repeat-x center bottom;
    background-size: 1500px auto;    
}
#about .inner { padding-bottom:200px;}
#about h1 {
    position: relative;
    margin: auto;
    width: 96%; height: auto; max-width:830px; aspect-ratio: 1242 / 468;
    text-indent: -9999px;
    background: url("../../img/catch.png") no-repeat;
    background-size: 100% auto;
}
#about h1::before {
    display:block; clear: both; content:"";
    position: absolute; top: -200px; left:0; right: 0; z-index: 9;
    margin: auto;
    width: 100%; height:auto; aspect-ratio: 346 / 260;
    max-width:295px;
    background: url("../../img/fish1.png") no-repeat;
    background-size: 100% auto;
}
#about h2 {
    margin: 40px 0;
    font-size: 231.2%;
    font-weight: 900;
    text-align: center;
    line-height: 130%;
    color: #0147A1;
}
#about .comennt {
    font-size: 112.5%;
    line-height: 250%;
    text-align: center;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #about .inner { padding-top: 100px; padding-bottom:200px;}
    #about h1::before { top: -100px; max-width:150px;}
    #about h2 { margin: 30px 0; font-size: 168.8%;}
    #about .comennt { font-size: 100%; line-height: 200%;}
}



/* Support*/
#support { position: relative; background:#0147A1;}
#support::before {
    display:block; clear: both; content:"";
    position: absolute; top:-100px; left: 0; right: 0; z-index: 9;
    width:100%; height:101px; max-width:1500px; 
    background:url("../../img/wave_b.png") repeat-x center bottom;
    background-size: 1500px auto;    
}
#support::after {
    display:block; clear: both; content:"";
    position: absolute; top: -220px; right:-50px; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 595 / 590;
    max-width:400px;
    background: url("../../img/kazari2.png") no-repeat;
    background-size: 100% auto;
}
#support .inner { padding-top: 50px; padding-bottom:200px;}
#support h2 {
    margin-bottom: 120px;
    color: #fff;
    text-align: center;
}
#support h2 small {
    position: relative;
    display: inline-block;
    margin-bottom:40px;
    font-size: 187.5%;
    font-weight: 900;
}
#support h2 small::before,
#support h2 small::after {
    display:block; clear: both; content:"";
    position: absolute; bottom:-15px;
    width:55px; height:auto; aspect-ratio: 109 / 100;
    background: url("../../img/fukidashi_y.png") no-repeat;
    background-size: 100% auto;
}
#support h2 small::before { left: -65px;}
#support h2 small::after { right: -65px; transform: scale(-1, 1);}
#support h2 small span { color: #FDD60D;}
#support h2 b {
    display: block;
    font-size: 70px;
    font-weight: 900;
    line-height: 100%;
    letter-spacing: 2px;
}
#support .support_list {
    position: relative;
    display: flex; flex-wrap: wrap; gap:35px;
}
#support .support_list::before {
    display:block; clear: both; content:"";
    position: absolute; top: -440px; left:-10%; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 346 / 260;
    max-width:385px;
    background: url("../../img/fish2.png") no-repeat;
    background-size: 100% auto;
}
#support .support_list::after {
    display:block; clear: both; content:"";
    position: absolute; top: -270px; left:-10%; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 451 / 413;
    max-width:330px;
    background: url("../../img/kazari1.png") no-repeat;
    background-size: 100% auto;
}
#support .support_list .box {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; gap:10px;
    padding: 70px 35px 50px;
    width: calc(33.3% - 23.3px);
    background: #fff;
    border-radius: 30px;
}
#support .support_list .box::before {
    display:block; clear: both; content:"";
    position: absolute; top:-50px; left: 0; right: 0;
    margin: auto;
    width:106px; height:auto; aspect-ratio: 106 / 106;
    background: url("../../img/support_mid01.png") no-repeat;
    background-size: 100% auto !important;
}
#support .support_list .box:nth-child(1)::before {
    background: url("../../img/support_mid01.png") no-repeat;
}
#support .support_list .box:nth-child(2)::before {
    background: url("../../img/support_mid02.png") no-repeat;
}
#support .support_list .box:nth-child(3)::before {
    background: url("../../img/support_mid03.png") no-repeat;
}
#support .support_list .box .pic {
    margin: auto;
    max-width: 185px;
}
#support .support_list .box .come {
    display: flex; flex-direction: column; gap:30px;
    text-align: center;
}
#support .support_list .box .come p:nth-child(1) {
    font-size: 187.5%;
    font-weight: 900;
    color: #0147A1;
    line-height: 145%;
}
#support .support_list .box .come p:nth-child(2) {
    font-weight: 700;
}
#support .support_list .box .come p:nth-child(2) span {
    color: #1AAAEF;
}
#support .support_list .box .come p:nth-child(2) b {
    position: relative; top: 10px;
    font-size: clamp(125%, 3.5vw, 57px);
    font-weight: 900;
}
#support .support_list .box .come p:nth-child(2) small {
    font-size: clamp(112.5%, 2.5vw, 156.2%);
}
#support .comment {
    padding-top: 20px;
    text-align: center;
    color: #fff;
} 
@media only screen and (max-width:768px){
    #support::after {
        top: -180px; right:-50px;
        max-width:250px;
    }
    #support h2 { margin-bottom: 60px;}
    #support .support_list {
        flex-direction: column;
        gap:20px;
    }
    #support .support_list::before {
        top: -380px; left:-5%;
        max-width:300px;
    }
    #support .support_list::after {
        top:-250px; left:-5%;
        max-width:250px;
    }
    #support .support_list .box {
        display: flex; flex-direction: row; flex-wrap: wrap; gap:20px;
        align-items: center;
        padding: 30px 30px 30px 150px;
        width: 100%;
    }
    #support .support_list .box::before {
        top:0; left:30px; right:inherit; bottom: 0;
        width: 80px;
    }
    #support .support_list .box .pic { width: 120px;}
    #support .support_list .box .come {
        gap:0;
        width: calc(100% - 120px - 20px);
        text-align: left;
    }
    #support .support_list .box .come p:nth-child(2) b {
        font-size: 40px;
    }
    #support .support_list .box .come p:nth-child(2) small {
        font-size: 20px;
    }
}
@media only screen and (max-width:468px){
    #support::after {
        top: -180px; right:-20px;
        max-width:200px;
    }
    #support h2 { margin-bottom:80px;}
    #support h2 small { margin-bottom:20px; font-size: 125%;}
    #support h2 b { font-size:45px;}    
    #support h2 small::before,
    #support h2 small::after { bottom:-5px; width:30px;}
    #support h2 small::before { left: -40px;}
    #support h2 small::after { right: -40px;}
    #support .support_list { gap:70px;}
    #support .support_list::before {
        top: -350px; left:-5%;
        max-width:200px;
    }
    #support .support_list::after {
        top:-300px; left:-5%;
        max-width:200px;
    }
    #support .support_list .box {
        flex-direction: column;
        padding:30px;
    }
    #support .support_list .box::before {
        top:-50px; left:0; right:0; bottom: inherit;
        width: 80px;
    }
    #support .support_list .box .pic,
    #support .support_list .box .come { width:100%; text-align: center;}
}



/* Case */
#case { position: relative;}
#case::before {
    display:block; clear: both; content:"";
    position: absolute; top:-100px; left: 0; right: 0; z-index: 9;
    width:100%; height:101px; max-width:1500px; 
    background:url("../../img/wave_w.png") repeat-x center bottom;
    background-size: 1500px auto;
}
#case::after {
    display:block; clear: both; content:"";
    position: absolute; top: -170px; left:-50px; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 595 / 590;
    max-width: 240px;
    background: url("../../img/kazari2.png") no-repeat;
    background-size: 100% auto;
}
#case .inner { padding-top: 50px;}
#case h2 {
    margin-bottom: 80px;
    color: #0147A1;
    text-align: center;
}
#case h2 small {
    position: relative;
    display: inline-block;
    margin-bottom:40px;
    font-size: 187.5%;
    font-weight: 900;
}
#case h2 small::before,
#case h2 small::after {
    display:block; clear: both; content:"";
    position: absolute; bottom:-15px;
    width:55px; height:auto; aspect-ratio: 109 / 100;
    background: url("../../img/fukidashi_b.png") no-repeat;
    background-size: 100% auto;
}
#case h2 small::before { left: -65px;}
#case h2 small::after { right: -65px; transform: scale(-1, 1);}
#case h2 small span { color: #1AAAEF;}
#case h2 b {
    display: block;
    font-size: 70px;
    font-weight: 900;
    line-height: 100%;
    letter-spacing: 2px;
}
#case .case_list {
    position: relative;
    display: flex; flex-wrap: wrap; gap:55px 60px;
}
#case .case_list::before {
    display:block; clear: both; content:"";
    position: absolute; top: -430px; right:-5%; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 346 / 260;
    max-width:345px;
    background: url("../../img/fish3.png") no-repeat;
    background-size: 100% auto;
}
#case .case_list::after {
    display:block; clear: both; content:"";
    position: absolute; top: -120px; left:-90px; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 595 / 590;
    max-width:295px;
    background: url("../../img/fish1.png") no-repeat;
    background-size: 100% auto;
}
#case .case_list .box {
    position: relative; z-index: 10;
    width: calc(50% - 30px);
    border: 3px solid #1AAAEF;
    box-shadow: 0 0 15px 0 rgba(16,152,215,0.15);
    border-radius: 30px;
    box-sizing: border-box;
}
#case .case_list .box .pic img {
    aspect-ratio: 520 / 230;
    object-fit: cover;
    border-top-left-radius: 27px;
    border-top-right-radius: 27px;
}
#case .case_list .box .cont {
    display: flex; flex-direction: column; gap:20px;
    padding: 30px 20px;
}
#case .case_list .box .cate { 
    font-size: 187.5%;
    color: #1AAAEF;
    font-weight: 700;
}
#case .case_list .box .naiyou p:nth-child(1) {
    margin-bottom: 5px;
    font-size: 112.5%;
    color: #0147A1;
    font-weight: 700;
}
#case .case_list .box .naiyou p:nth-child(2) {
    width: 100px;
    font-size: 87.5%;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: #0147A1;
}
#case .case_list .box .come b {
    display: block;
    font-size: 112.5%;
    font-weight: 700;
}
@media only screen and (max-width:768px){
    #case .case_list { gap:20px;}
    #case .case_list .box { width: calc(50% - 10px);}
}
@media only screen and (max-width:468px){
    #case::after {
        top: -170px; left:-5%;
        max-width: 200px;
    }
    #case h2 { margin-bottom: 60px;}
    #case h2 small { margin-bottom:20px; font-size: 125%;}
    #case h2 b { font-size:45px;}    
    #case h2 small::before,
    #case h2 small::after { bottom:-5px; width:30px;}
    #case h2 small::before { left: -40px;}
    #case h2 small::after { right: -40px;}
    #case .case_list { flex-direction: column;}
    #case .case_list::before {
        top: -350px; right:-5%;
        max-width:200px;
    }
    #case .case_list::after {
        top: -50px; left:-5%;
        max-width:150px;
    }
    #case .case_list .box {
        width:100%;
        border: 5px solid #1AAAEF;
    }
    #case .case_list .box .pic img {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }
}



/* Free*/
#free {
    position: relative;
    background:#F2FAFE;
}
#free::before {
    display:block; clear: both; content:"";
    position: absolute; top: -18px; left: 0; z-index: 9;
    width: 100%; height:36px;
    background:#fff url("../../img/wave2_lb.png") repeat-x;
}
#free .inner { padding-bottom: 0;}
#free .free_cont {
    margin-bottom: 80px;
    padding: 30px;
    background: #fff;
    border-radius: 30px;
}
#free .ryouma {
    position: relative; z-index: 10;
    margin: auto;
    width: 90%; height: auto;
    max-width: 670px;
    aspect-ratio: 700 / 299;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #free .free_cont { margin-bottom: 40px; padding:15px;}
}



/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {
    position: relative;
    background:#1AAAEF;
}
#footer::before {
    display:block; clear: both; content:"";
    position: absolute; top: -35px; left: 0; z-index: 9;
    width: 100%; height:36px;
    background: url("../../img/wave2_b.png") repeat-x;
}
#footer::after {
    display:block; clear: both; content:"";
    position: absolute; top: -170px; right:-50px; z-index: 9;
    width: 100%; height:auto; aspect-ratio: 595 / 590;
    max-width: 311px;
    background: url("../../img/kazari2.png") no-repeat;
    background-size: 100% auto;
}
#footer .inner {
    display: flex; flex-direction: column; gap:60px;
    padding: 80px 0;
    max-width: 900px;
}
#footer .mid {
    font-size: 250%;
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 130%;
    letter-spacing: 2px;
}
#footer .add {
    display: flex; flex-direction: column; gap:30px;
    padding: 50px 35px;
    border:5px solid #fff;
    border-radius: 30px;
}
#footer .add .come {
    color: #fff;
    text-align: center;
}
#footer .add .come b,
#footer .add .come small { display:block;}
#footer .add .come b {
    margin-bottom: 10px;
    font-size: 150%;
    font-weight: 900;
    line-height: 130%;
    letter-spacing: 2px;
}
#footer .add ul {
    display: flex; gap:20px;
}
#footer .add ul li {
    width: 50%;
}
#footer .add ul li a {
    display: flex;
    padding: 25px 25px 25px 90px;
    font-weight: 900;
    text-decoration:none;
    color:#0147A1;
    text-align: center;
    background-color: #FDD60D !important; 
    border-radius:100px;
    background-size:70px auto !important; 
}
#footer .add ul li.tel a {
    font-family: "Roboto";
    font-size: 250%;
    background: url("../../img/icon_tel.png") no-repeat 20px center;
}
#footer .add ul li.mail a {
    font-size: 150%;
    background: url("../../img/icon_mail.png") no-repeat 20px center;
}
#footer .copy {
    font-size: 87.5%;
    text-align: center;
    color: #fff;
}
@media only screen and (min-width:769px){
}
@media only screen and (max-width:768px){
    #footer .inner { padding: 30px 0; gap:30px;}
    #footer .add ul { flex-direction: column; align-items: center;}
    #footer .add ul li { width:100%; max-width: 350px;}
    #footer .add ul li.tel a { font-size: 200%;}
    #footer .add ul li.mail a { font-size: 125%;}
}
@media only screen and (max-width:468px){
    #footer::after { top: -100px; right:-20px; max-width: 150px;}
    #footer .mid { font-size: 180%;}
    #footer .add .come b { font-size: 112.5%;}
    #footer .add { padding: 20px 10px;}
    #footer .add ul li a { 
        padding: 15px 15px 15px 70px;
        background-position: 10px center;
        background-size:50px auto !important; 
    }
    #footer .add ul li.tel a { font-size: 150%;}
    #footer .add ul li.mail a { font-size:100%;}
    #footer .copy { font-size: 10px;}
}


/*====================================================================================================
  PAGE
====================================================================================================*/
#page,
#page a { display:block; width:50px; height:50px;}
#page { position: fixed; bottom:20px; right:20px; z-index: 999999;}
#page a { text-indent: -9999px; background:#1AAAEF url(../img/page_top.png) no-repeat;}
@media only screen and (max-width:768px){
    #page { bottom:20px; right:10px;}
}



/*====================================================================================================
  COLOR eto.. [No Touch]
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}