@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

@font-face {
  font-family: "LTG";
  src:
    url("../fonts/ltg-web.woff") format("woff2"),
    url("../fonts/ltg-web.woff2") format("woff");
}

/* CSS Document */
/**********************************************************************リセット*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:14px;
    vertical-align:baseline;
    background:transparent;
	text-align: justify;
	text-decoration: none;
	text-wrap: wrap;
	color: #000;
	scroll-behavior: smooth;
}

body {
    line-height:1.2;
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #fff;
	width: 100%;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
	display: block;
}

img{
	width: 100%;
}

* {
   box-sizing: border-box;
}
/**********************************************************************リセット*/


/**********************************************************************共通*/

.sec-contents{
	padding: 5%;
	text-align: center;
}

.head{
	font-size: 36px;
	font-family: 'LTG';
	margin: 5% auto 5px;
}
.head-sub{
	font-size: 16px;
	margin-bottom: 5%;
}
.btn{
	width: 240px;
	margin: 30px auto;
}

/**********************************************************************共通ここまで*/
.rogo{
	width: 42vw;
	position: relative;
	left: 5%;
	top: 20px;
}
.title-img{
	width: 100vw;
	position:relative;
	top: -15vw;
	overflow:hidden;
}
h1{
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	position: relative;
	top: -30px;
	margin-left: calc(95vw - 210px);
}
#top{
	background-image: url("../imges/character01.jpg");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 45vw;
}

.top-btns{
	padding: 5%;
	display: flex;
	justify-content: space-between;
}
.top-btns>a{
	width: 30%;
}

#sec01{
	background-color: #f56464;
}

#sec01>.head, #sec01>.head-sub{
	color: #fff;
}

.con01{
	background: #fff;
	border-radius: 5px;
	margin-bottom: 5%;
	padding: 5% 0;
}

.con02{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0 5%;
}
.con02>img{
	width: 85px;
	margin-right: 10px;
}

.con02>h3{
	font-size: 24px;
	font-family: 'LTG';
	color: #ed735c;
}

.con01>.lead{
	text-align: center;
	margin: 10px auto;
	font-weight: 600;
}

.con01>div>div>.title, .title{
	width: 76%;
	margin: 5% 0 3%;
}

.con01>div>div>.text, .telling>.text{
	margin-left: 5%;
	width: 90%;
}

.con01>.chirashi{
	width: 90%;
	margin: 5%;
}

.con02>h3>span{
	font-size: 18px;
	font-family: 'LTG';
	color: #ed735c;
	line-height: 1;
}

.rightline{
	width: 240px;
	margin-left: calc(50% - 120px);
	margin-bottom: 5%;
}

.con01>table{
	width: 90%;
	margin: 0 auto;
}
.con01>table td.right{
	text-align: right;
}

.enja{
	width: 90%;
	margin-left: 5%;
}
.name{
	text-align: center;
	font-size: 21px;
	margin: 5px auto 5%;
}

.con01>iframe{
	width: 80vw;
	height: 54vw;
	margin-left: 5%;
	margin-bottom: 30px;
}
.con01>.staff{
	text-align: center;
}

.con01>.staff>.staff-name{
	font-size: 21px;
	margin: 5px auto 5%;
}


#sec02>.head, #sec02>.head-sub{
	color: #0071bc;
}


.news-con{
  padding-left: 1em;
	margin-bottom: 5%;
}

#sec03{
	background-color:#ffffdb;
}

#sec03>.head, #sec03>.head-sub{
	color: #39b57f;
}

.about-title{
	color: #39b57f;
    padding: 0.5rem;
    border-top: 3px dotted #39b57f;
    border-bottom: 3px dotted #39b57f;
	font-size: 18px;
	margin-bottom: 5%;
}
#sec03 .lead{
	margin: 5% auto;
}

#sec03>img{
	margin-bottom: 5%;
}


#sec03>.prof{
	text-align: left;
	margin-bottom: 5%;
}

#sec03>.about-text{
	text-align: justify;
}


#sec04>.head, #sec04>.head-sub{
	color: #ed735c;
}

.contact-lead{
	text-align: justify;
	font-size: 16px;
	font-weight: 500;
}


#sec04>iframe{
	width: 100%;
	height: 1400px;
}

footer{
	background-color: #ffffdb;
	text-align: center;
	padding: 10% 0 200px;
}
h2{
	font-size: 21px;
	margin: 0 auto 5%;
	font-weight: 500;
	display: inline-block;
}


.footer1{
	margin: 0 auto;
}
.footer1>a:link, .footer1>a:visited, .footer1>a:hover, .footer1>a:active {
	color: #000;
}

.footer1>a{
	vertical-align: middle;
	margin-bottom: 10px;
	margin-left: 5%;
}
.footer1>a>img{
	width: 26px;
	margin-right: 5px;
	vertical-align: middle;
}


.footer2{
	display: flex;
	justify-content:center;
}
.footer2>a{
	width: 50px;
	margin: 5% 10px;
}

.copyright{
	font-size: 10px;
}

.pc{
	display: none;
}

@media screen and (min-width: 960px) {
	
	/**********************************************************************共通*/
	.mob{
		display: none;
	}
	.pc{
		display: inline-block;
	}

	.sec-contents{
		padding: 50px 0;
		text-align: center;
	}

	.head{
		font-size: 64px;
		font-family: 'LTG';
		margin: 50px auto 20px;
	}
	.head-sub{
		font-size: 24px;
		margin: 0 auto 50px;
	}
	.btn{
		width: 240px;
		margin: 30px auto;
	}

	/**********************************************************************共通ここまで*/
	.top-pc{
		width: 100%;
		text-align: center;
	}
	.top-pc>img{
		max-width: 960px;
		margin: 0 auto -2px;		
	}
	.rogo{
		width: 42vw;
		max-width: 300px;
		position: relative;
		left: 0;
		top: 0;
	}
	.title-img{
		width: 100vw;
		max-width: 800px;
		position:relative;
		top: 0;
		left: 0;
		overflow:hidden;
	}
	h1{
		font-size: 14px;
		font-weight: 400;
		line-height: 1.7;
		position: relative;
		top: 0;
		right: 0;
	}
	#top{
		background-image: url("../imges/character01.jpg");
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 45vw;
	}
	.top-btns{
		padding: 50px 0;
		display: flex;
		justify-content: space-between;
		max-width:960px;
		margin: 0 auto;
	}


	#sec01{
		background-color: #f56464;
	}

	#sec01>.head, #sec01>.head-sub{
		color: #fff;
	}

	.con01{
		width: 90%;
		max-width: 800px;
		background: #fff;
		border-radius: 5px;
		margin: 0 auto 50px;
		padding: 50px 0;
	}

	.con02{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0 5%;
	}
	.con02>img{
		width: 85px;
		margin-right: 10px;
	}

	.con02>h3{
		font-size: 42px;
		font-family: 'LTG';
		color: #ed735c;
	}

	.con01>.lead{
		font-size: 21px;
		text-align: center;
		margin: 10px auto;
		font-weight: 600;
	}
	.con01>div.flex-box{
		display: flex;
		justify-content: flex-start;
		padding: 30px 50px;
	}
	.con01>div.flex-box>div{
		margin-right: 50px;
	}
	.con01>div>div>.title{
		width: 100%;
		margin: 0;
	}

	.con01>div>div>.text{
		margin-left:0;
		width: 100%;
	}

	.con01>.chirashi{
		width: 70%;
		margin-left: 15%;
	}

	.con02>h3>span{
		font-size: 24px;
		font-family: 'LTG';
		color: #ed735c;
		line-height: 1;
		margin-top: -20px;
	}

	.rightline{
		width: 360px;
		margin-left: calc(50% - 180px);
		margin-top: 30px;
	}

	.con01>table{
		width: 430px;
		margin: 0 auto;
	}
	.con01>table td.right{
		text-align: right;
	}
	.enja-title{
		width: 310px;
		margin-left: 50px;
		margin-bottom: 30px;
	}

	.enja{
		width: 70%;
		margin-left: 15%;
	}
	.name{
		text-align: center;
		font-size: 21px;
		margin: 5px auto 5%;
	}

	.con01>iframe{
		width: 70%;
		height: 400px;
		margin-left: 15%;
	}
	.con01>.staff{
		text-align: center;
	}
	

	.con01>.staff>.staff-name{
		font-size: 21px;
		margin: 5px auto 5%;
	}
	.telling{
		text-align: center;
	}


	#sec02>.head, #sec02>.head-sub{
		color: #0071bc;
	}
	#sec02>.con01>a{
		display: inline-block;
	}


	.news-con{
	  padding-left: 1em;
		margin-bottom: 5%;
	}

	#sec03{
		background-color:#ffffdb;
		padding: 50px calc(50vw - 300px);
	}

	#sec03>.head, #sec03>.head-sub{
		color: #39b57f;
	}

	.about-title{
		color: #39b57f;
		padding: 0.5rem;
		border-top: 3px dotted #39b57f;
		border-bottom: 3px dotted #39b57f;
		font-size: 27px;
		margin-bottom: 5%;
	}
	#sec03 .lead{
		margin: 5% auto;
	}

	#sec03>img{
		margin-bottom: 5%;
		max-width: 800px;
	}


	#sec03>.prof{
		text-align: left;
		margin-bottom: 5%;
	}

	#sec03>.about-text{
		text-align: justify;
	}


	#sec04>.head, #sec04>.head-sub{
		color: #ed735c;
	}

	.contact-lead{
		text-align: justify;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
	}


	#sec04>iframe{
		width: 100%;
		height: 1000px;
	}

	footer{
		background-color: #ffffdb;
		text-align: center;
		padding: 50px 0 200px;
	}
	h2{
		font-size: 21px;
		margin: 0 auto 30px;
		font-weight: 500;
		display: inline-block;
	}


	.footer1{
		margin: 0 auto;
		width: 270px;
	}
	.footer1>a:link, .footer1>a:visited, .footer1>a:hover, .footer1>a:active {
		color: #000;
	}

	.footer1>a{
		vertical-align: middle;
		margin-bottom: 10px;
		margin-left: 5%;
	}
	.footer1>a>img{
		width: 26px;
		margin-right: 5px;
		vertical-align: middle;
	}


	.footer2{
		display: flex;
		justify-content:center;
	}
	.footer2>a{
		width: 50px;
		margin: 30px 10px;
	}

	.copyright{
		font-size: 10px;
	}
	.mob{
		display: none;
	}

}