/* ---------------------------------------------
	base style , css reset
---------------------------------------------- */
html, 
body {
	height: 100%;
}
html {
	font-size: 18px;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-weight: 500;
	line-height: 1.75em;
	color: #222;
}

/*画面全体の設定*/
body,
html {
  height: 100%;
  margin: 0 auto;
  /*letter-spacing: 2px;*/
  /*font-size: 10px;*/
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: #0894CF;
	text-decoration: underline;
}
a:active,
a:hover {
	color: #16B1D1;
}

.home_link {
	margin: 0 auto;
	background-color: #fafafa;
	padding: 1rem 1.5rem;
	display: inline-block;
}
*:hover {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    
}

/* ---------------------------------------------
	strong
---------------------------------------------- */
.marker {
	font-weight: bold;
	padding: 0 2px;
background: linear-gradient(transparent 60%, #ffff7d 40%);
}

.red {
	font-weight: bold;
	color: #CD191C;
}
/* ---------------------------------------------
	header
---------------------------------------------- */
.header {
	height: 2rem;
	background:linear-gradient(to right,#3667C1, #2a92c9);
	display: flex;
	align-items: center;
	padding: 0 2rem;
}
.header .icon {
	width: 0.75rem;
	height: auto;
	margin-right: 0.5rem;
}
.header a {
	color: #fff;
	font-size: 0.75rem;
	display: block;
}
/* -----------------------------------------------
  Layout > 600px以下（smartphone）
-------------------------------------------------- */
	@media (max-width: 600px) {
		.header a {
			font-size: 0.6rem;
		}
	}
/* ---------------------------------------------
	layout
---------------------------------------------- */
.inner {
	width: 800px;
	margin: 0 auto 0 10%;
}
.layout {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	height: calc(100vh - 2rem);
}
.column-1 {
	width: 30%;
	background-size: cover;
	background-image: url("../img/img01.jpg");
	background-position: center center;
	
}
.column-2 {
	width: calc(70% - 4rem);
	overflow: auto;
	background-color: #fff;
	padding: 1rem 2rem;
}
/* -----------------------------------------------
  Layout > 1378px以下（pc）
-------------------------------------------------- */
	@media (max-width: 1378px) {
		.inner {
			width: 85%;
			margin: 0 auto 0 5%;
		}
	}
/* -----------------------------------------------
  Layout > 1024px以下（tablet）
-------------------------------------------------- */
	@media (max-width: 1024px) {
		.inner {
			width: calc(100% - 2rem);
			margin: 0 auto;
		}
}
/* -----------------------------------------------
  Layout > 800px以下（tablet tate）
-------------------------------------------------- */
	@media (max-width: 800px) {
		.layout {
			display: block;
		}
		.column-1,
		.column-2 {
			width: 100%;
			padding: 0;
		}
		.column-1 {
			height: 50vh;
			position: relative;
		}
		.column-2 {
			height: auto;
		}
		.wave {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			background-image: url("../img/wave.png");
			background-repeat: repeat-x;
			background-position: left top;
			/*border: 1px solid red;*/
			width: 100%;
			height: 30px;
			z-index: auto;
		}
}
/* -----------------------------------------------
  Layout > 600px以下（smartphone）
-------------------------------------------------- */
	@media (max-width: 600px) {
		.header {
			padding: 0 0.5rem;
		}
		.column-1 {
			height: 35vh;
		}
	}

/* ---------------------------------------------
	intro
---------------------------------------------- */
.intro-list {
	margin-bottom: 2rem;
}
.intro {
	background-color: #fff;
	border-top: 1px solid #444;
	padding: 1.5rem 2rem;
	margin: 2rem 0 1rem 0;
}
.intro-ttl {
	font-size: 1.5rem;
	font-family: "游明朝","ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	/*color: #1F8ACD;*/
	color: #222;
	letter-spacing: 2px;
	margin: 1rem 0 2rem 0;
}
/* -----------------------------------------------
	intro > 800px以下（tablet tate）
-------------------------------------------------- */
	@media (max-width: 800px) {
		.intro {
			margin-top: 0;
		}
}
/* -----------------------------------------------
	intro > 600px以下（smartphone）
-------------------------------------------------- */
	@media (max-width: 600px) {
		.intro {
			padding: 0;
		}
		.intro-ttl {
			margin: 2rem 0 1rem 0;
			font-size: 1.125rem;
		}

}


/* ---------------------------------------------
	text
---------------------------------------------- */
.page-ttl {
	padding: 0;
	/*color: #fff;*/
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
	margin: 3rem 0;
	/*padding: 3rem 0;*/
}
.ttl2 {
	font-size: 1.5rem;
	letter-spacing: 2px;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #222;
}
p+.ttl2,
ul+.ttl2 {
	margin-top: 6rem;
}
.download {
	display: block;
	border-radius: 40px;
	background-color: #fafafa;
	padding: 1rem 1.5rem 1rem 4.5rem;
	border: 1px solid #ddd;
	box-shadow: 4px 4px 0px 0px #eee;
	background-image: url("../img/dl.png");
	background-repeat: no-repeat;
	background-position: left 2rem center;
	background-size: 1.5rem auto;
}
.download:hover {
	background-color: #ddd;
	box-shadow: none;
	transform: translate(4px,4px);
}
.list li {
	/*border-bottom: 1px dotted #aaa;*/
}
.list li > ul {
	border-top: 1px dotted #aaa;
}
.list li > ul li {
	border-bottom: 1px dotted #aaa;
}
.list li+li {
	margin-top: 1rem;
}
.list li > ul li+li {
	margin-top: 0;
}
/* -----------------------------------------------
	text > 800px以下（tablet tate）
-------------------------------------------------- */
	@media (max-width: 800px) {
		.page-ttl {
			margin-top: 1.75rem;
			margin-bottom: 1.5rem;
		}
}
/* -----------------------------------------------
	text > 600px以下（smartphone）
-------------------------------------------------- */
	@media (max-width: 600px) {
		p+.ttl2,
		ul+.ttl2 {
			margin-top: 4rem;
		}
		.ttl2 {
			font-size: 1.25rem;
		}
		.list li {
			padding-bottom: 0.5rem;
		}

}
	
/* ---------------------------------------------
	gallery
---------------------------------------------- */
.gallery {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	flex-wrap: wrap;
	margin: 0 0 4rem 0;
	padding: 0;
}

.gallery li {
	/*width: 25%;
	margin: 0;
	padding: 0;*/
}
.gallery li img {
	/*width: 150px;
	height: 150px;*/
}

/* 縦横比一定の正方形 */
.rect-wrap {
	width: calc(25% - 20px);
	margin: 0 10px;
}
.rect {
  width : 100% ;
  padding-top : 100% ;
  background-color: #29d632;
}
.gallery-item1,
.gallery-item2, 
.gallery-item3, 
.gallery-item4 {
	background-size: cover;
	background-position: center center;
}
.gallery-item1 {
	background-image: url("../img/img02.jpg");
}
.gallery-item2 {
	background-image: url("../img/img03.jpg");
}
.gallery-item3 { 
	background-image: url("../img/img04.jpg");
}
.gallery-item4 {
	background-image: url("../img/img05.jpg");
}
/* -----------------------------------------------
	gallery > 600px以下（smartphone）
-------------------------------------------------- */
	@media (max-width: 600px) {
		.gallery {
			display: flex;
			flex-wrap: wrap;
		}
		.gallery li {
			width: 50%;
		}
}


/* -----------------------------------------------
	.copyright
-------------------------------------------------- */
.copyright {
	color: #555;
	font-size: 0.7rem;
	background-color: #ddd;
	text-align: center;
	padding: 0;
	margin: 4rem -2rem -2rem -2rem;
}
/* -----------------------------------------------
	copyright > 800px以下（tablet tate）
-------------------------------------------------- */
	@media (max-width: 800px) {
		.copyright {
			margin: 4rem 0 0 0;
		}
		.copyright p {
			margin: 0;
		}
}