@charset "UTF-8";

/*
Theme Name: ペラテン
Author: DotCompany (Keigo Kadokawa)
Description: ペラテンで利用するテーマです。
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}

.sp-br {
	display: none;
}
.sp-only {
	display: none;
}
.pc-br {
	display: block;
}
.pc-only {
	display: block;
}

.header {
    border-bottom: 1px solid #eee;
	background: #fff;
}
.header .container {
    display: flex;
    align-items: center;
}
.header .logo {
    padding: 1rem;
}
.header .logo img {
    width: 55px;
}
.header .nav {
    width: fit-content;
    margin: 0 1.5rem 0 .5rem;
}
.header .nav ul {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
}
.header .nav ul li {
    font-size: 1.15rem;
    margin: 0 1.5rem 0 0;
}

.welcome {
	background: #fff;
}
.welcome h1 {
    margin: 5rem 0 0 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
}
.welcome .check {
    width: fit-content;
    margin: 1.5rem auto;
    display: flex;
    align-items: center;
}
.welcome .check span {
    display: block;
    padding: .5rem .75rem;
    margin: 0 .5rem;
    border-radius: 2.25rem;
    background: #00fa9a;
    font-weight: bold;
}
.welcome .point {
    margin: 5rem auto;
    width: 760px;
    font-size: 1.05rem;
    line-height: 1.5rem;
}
.welcome .search {
	width: fit-content;
	margin: 0 auto 5rem auto;
}
.welcome .search a {
	display: block;
	width: fit-content;
	padding: 1rem;
	background: #00fa9a;
	border-radius: 5rem;
	font-weight: bold;
}

.about {
    min-height: 100vh;
    border-radius: 5rem 5rem 0 0;
    background: #f5f5f5;
}
.about .container {
    padding: 5rem;
}
.about h2 {
    font-size: 1.75rem;
    font-weight: bold;
}

.feature {
    margin: 5rem 0;
    padding: 0 3rem;
}
.feature:nth-child(2n-1) {
    text-align: right;
}
.feature .number {
    display: inline-block;
    width: fit-content;
    font-size: 2.85rem;
    font-weight: 900;
    background: #00fa9a;
    padding: 1rem 1rem 1.2rem 1rem;
    border-radius: 5rem;
}
.feature .headline {
    display: inline-block;
    font-size: 1.5rem;
    transform: translateY(-35%);
    font-weight: bold;
    margin: 0 1rem;
}
.feature p {
    margin: 0 5rem;
    line-height: 1.75rem;
}




/* ===== スマホ版 ===== */
@media screen and (max-width : 599px) {
	.sp-br {
		display: block;
	}
	.sp-only {
		display: block;
	}
	.pc-br {
		display: none;
	}
	.pc-only {
		display: none;
	}
	.header {
		border-bottom: 1px solid #eee;
	}
	.header .container {
		display: flex;
		align-items: center;
	}
	.header .logo {
		padding: 1rem;
	}
	.header .logo img {
		width: 55px;
	}
	.header .nav {
		width: fit-content;
		margin: 0 1.5rem 0 .5rem;
	}
	.header .nav ul {
		display: flex;
		align-items: center;
		overflow-x: scroll;
	}
	.header .nav ul li {
		font-size: 1.15rem;
		margin: 0 1.5rem 0 0;
		white-space: nowrap;
	}

	.welcome h1 {
		margin: 5rem 0 0 0;
		text-align: center;
		font-size: 2.5rem;
		font-weight: 900;
	}
	.welcome .check {
		width: fit-content;
		margin: 1.5rem 1rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.welcome .check span {
		display: block;
		width: calc(100% / 2 - 1rem);
		padding: .5rem .75rem;
		margin: 0 .5rem .5rem .5rem;
		border-radius: 2.25rem;
		background: #00fa9a;
		font-weight: bold;
		text-align: center;
	}
	.welcome .point {
		margin: 5rem 0;
		padding: 0 1rem;
		width: 100%;
		font-size: 1.05rem;
		line-height: 1.5rem;
	}
	.welcome .search {
		width: fit-content;
		margin: 4rem auto 4rem auto;
	}
	.welcome .search a {
		display: block;
		width: fit-content;
		padding: 1rem;
		background: #00fa9a;
		border-radius: 5rem;
		font-weight: bold;
	}

	.about {
		min-height: 100vh;
		border-radius: 5rem 5rem 0 0;
		background: #f5f5f5;
	}
	.about .container {
		padding: 3rem 1rem;
	}
	.about h2 {
		font-size: 1.75rem;
		font-weight: bold;
		text-align: center;
	}

	.feature {
		margin: 5rem 0;
		padding: 0;
	}
	.feature:nth-child(2n-1) {
		text-align: right;
	}
	.feature .number {
		display: inline-block;
		width: fit-content;
		font-size: 2.85rem;
		font-weight: 900;
		background: #00fa9a;
		padding: 1rem 1rem 1.2rem 1rem;
		border-radius: 5rem;
	}
	.feature .headline {
		display: inline-block;
		font-size: 1.5rem;
		transform: translateY(-35%);
		font-weight: bold;
		margin: 0 1rem;
	}
	.feature p {
		margin: 0 5rem;
		line-height: 1.75rem;
	}
}




/* ===== マニュアルページ（/manual）スタイル =====*/
.main.page-manual {
    margin: 0 auto;
    padding: 0 0 5rem 0;
}

.main.page-manual .cover {
    background: #00fa9a;
    border-bottom: 1px solid #eee;
}
.main.page-manual .cover .container {
    width: 1000px;
    margin: 0 auto;
    padding: 5.75rem;
}
.main.page-manual .cover h1 {
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}

.page-manual .agenda {
	width: 1000px;
    border-bottom: 1px solid #eee;
    padding: 1.5rem 0;
    margin: 0 auto 5rem auto;
}
.page-manual .agenda ul {
    display: flex;
    align-items: center;
}
.page-manual .agenda ul li {
    margin: 0 1.5rem 0 0;
    font-size: 1.15rem;
}
.page-manual .agenda ul li a {
    text-decoration: underline;
}

.page-manual .article {
	width: 1000px;
	margin: 0 auto;
}
.page-manual .article h2 {
    width: 50%;
    font-size: 1.45rem;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    padding: 0 0 1rem 0;
    margin: 3rem 0 1rem 0;
}
.page-manual .article p,.article ol {
    margin: 1rem 0;
    line-height: 1.75rem;
}
.page-manual .article ol li {
    margin: 0 2rem;
    list-style: decimal;
}

@media screen and (max-width : 599px) {
	.main.page-manual {
    		margin: 0 auto;
    		padding: 0 0 5rem 0;
    		width: 100%;
	}
	.main.page-manual .cover {
    	background: #00fa9a;
    	border-bottom: 1px solid #eee;
	}
	.main.page-manual .cover .container {
    	width: 100%;
    	margin: 0 auto;
    	padding: 5.75rem 1rem;
	}
	.main.page-manual .cover h1 {
    	font-size: 2rem;
    	text-align: center;
    	font-weight: bold;
	}
	.page-manual .agenda {
		width: 100%;
    	border-bottom: 1px solid #eee;
    	padding: 1.5rem 1rem;
    	margin: 0 0 5rem 0;
	}
	.page-manual .agenda ul {
    		display: flex;
    		align-items: center;
	}
	.page-manual .agenda ul li {
    		margin: 0 1.5rem 0 0;
    		font-size: 1.15rem;
	}
	.page-manual .agenda ul li a {
    		text-decoration: underline;
	}

	.page-manual .article {
		width: 100%;
		padding: 0 1rem;
	}
	.page-manual .article h2 {
    		width: 50%;
    		font-size: 1.45rem;
    		border-bottom: 1px solid #eee;
    		font-weight: bold;
    		padding: 0 0 1rem 0;
    		margin: 3rem 0 1rem 0;
	}
	.page-manual .article p,.article ol {
    		margin: 1rem 0;
    		line-height: 1.75rem;
	}
	.page-manual .article ol li {
    		margin: 0 2rem;
    		list-style: decimal;
	}
}




/* ===== テンプレート検索画面 ===== */
.main.page-templates-list .cover {
    background: #00fa9a;
    border-bottom: 1px solid #eee;
}
.main.page-templates-list .cover .container {
    width: 1000px;
    margin: 0 auto;
    padding: 5.75rem;
}
.main.page-templates-list .cover h1 {
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}

.main.page-templates-list .maincontainer {
    display: flex;
    align-items: flex-start;
}
.main.page-templates-list .maincontainer .side-container {
	width: 30%;
	position: sticky;
    margin: 3rem 0;
    top: 3rem;
    left: 0;
}
.main.page-templates-list .maincontainer .side {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 0 .25rem .25rem 0;
}
.main.page-templates-list .maincontainer .side-container .ad {
	width: fit-content;
	margin: 3rem auto 0 auto;
}

.main.page-templates-list .side h2 {
    border-bottom: 1px solid #eee;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1rem;
}
.main.page-templates-list .side h3 {
    padding: 1rem;
    font-size: 1.15rem;
}
.main.page-templates-list .side select {
    border: 1px solid #eee;
    border-radius: .25rem;
    margin: 0 1rem 1.5rem 1rem;
    padding: 1rem;
    width: calc(100% - 2rem);
}

.main.page-templates-list .list {
    width: 70%;
    margin: 3rem 5rem;
}
.main.page-templates-list .list .content {
    width: 100%;
    height: 30vh;
    margin: 0 0 3rem 0;
    background: #f5f5f5;
    border-radius: .25rem;
}
.main.page-templates-list .list .content .flex {
    display: flex;
    align-items: center;
}
.main.page-templates-list .list .content .title {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1.1rem 0 0 1rem;
}
.main.page-templates-list .list .content .links {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 1rem 1rem 0 auto;
}
.main.page-templates-list .list .content .links a {
    display: block;
    width: 10rem;
    text-align: center;
    border: 1px solid #eee;
    border-radius: .25rem;
    background: #fff;
    padding: 1rem;
    margin: 0 0 0 1rem;
}

@media screen and (max-width : 599px) {
	.main.page-templates-list .cover {
    	background: #00fa9a;
    	border-bottom: 1px solid #eee;
	}
	.main.page-templates-list .cover .container {
    	width: 100%;
    	margin: 0;
    	padding: 5.75rem 1rem;
	}
	.main.page-templates-list .cover h1 {
    	font-size: 2rem;
    	text-align: center;
    	font-weight: bold;
	}

	.main.page-templates-list .maincontainer {
    	display: block;
	}
	.main.page-templates-list .maincontainer > .side {
    	position: static;
    	margin: 0;
    	top: 0;
    	left: 0;
    	width: 100%;
		border: none;
    	border-bottom: 1px solid #eee;
    	border-radius: 0 .25rem .25rem 0;
	}

	.main.page-templates-list .side h2 {
    	border-bottom: 1px solid #eee;
    	font-size: 1.25rem;
    	font-weight: bold;
    	padding: 1rem;
	}
	.main.page-templates-list .side h3 {
    	padding: 1rem;
    	font-size: 1.15rem;
	}
	.main.page-templates-list .side select {
    	border: 1px solid #eee;
    	border-radius: .25rem;
    	margin: 0 1rem 1.5rem 1rem;
    	padding: 1rem;
    	width: calc(100% - 2rem);
	}

	.main.page-templates-list .list {
    	width: 100%;
    	margin: 3rem 0;
		padding: 0 1rem;
	}
	.main.page-templates-list .list .content {
    	width: 100%;
    	height: 30vh;
    	margin: 0 0 3rem 0;
    	background: #f5f5f5;
    	border-radius: .25rem;
	}
	.main.page-templates-list .list .content .flex {
    	display: block;
	}
	.main.page-templates-list .list .content .title {
   		font-size: 1.2rem;
    	font-weight: bold;
    	padding: 1.1rem 0 0 1rem;
	}
	.main.page-templates-list .list .content .links {
    	display: flex;
    	align-items: center;
    	width: 100%;
    	margin: 1rem 1rem 0 auto;
	}
	.main.page-templates-list .list .content .links a {
    	display: block;
    	width: calc(100% - 2rem);
    	text-align: center;
    	border: 1px solid #eee;
    	border-radius: .25rem;
    	background: #fff;
    	padding: 1rem;
    	margin: 0 0 0 1rem;
	}
}





/* ===== 404 =====  */
.main.page-notfound {
   width: fit-content;
   margin: 5rem auto;
}
.main.page-notfound h1 {
   text-align: center;
   font-size: 8rem;
   color: #666;
   font-weight: bold;
   margin: 0 0 3rem 0;
}
.main.page-notfound a {
   display: block;
   width: fit-content;
   margin: 3rem auto 0 auto;
   padding: 1rem 1.15rem;
   background: #00fa9a;
   border-radius: .25rem;
}





/* ===== テンプレート詳細ページ ===== */
.template-detail {
  padding: 0 1rem;
  margin: 3rem 0;
}
.template-detail .head {
	display: flex;
	align-items: center;
	margin: 0 0 3rem 0;
}
.template-detail .template-title {
  	font-size: 1.5rem;
  	font-weight: bold;
}
.template-detail .buttons {
	width: fit-content;
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
}
.template-detail .btn-download {
	padding: .95rem 1.05rem;
	color: #000;
	background: #00fa9a;
	border: 3px solid #00fa9a;
	font-weight: bold;
	border-radius: .25rem;
	width: 10rem;
	text-align: center;
}
.template-detail .btn-demo {
	padding: .95rem 1.05rem;
	color: #000;
	background: #fff;
	border: 3px solid #00fa9a;
	font-weight: bold;
	border-radius: .25rem;
	width: 10rem;
	text-align: center;
	margin: 0 1rem 0 0;
}
.template-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/*.template-buttons a {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.25s;
}

.btn-demo {
  background: #007aff;
  color: #fff;
}

.btn-demo:hover {
  background: #005ed1;
}

.btn-download {
  background: #4caf50;
  color: #fff;
}

.btn-download:hover {
  background: #3d8b41;
}*/