@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/* ==========================================================================
  base
========================================================================== */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {-webkit-text-size-adjust: 100%;}
html {font-size: 62.5%;}
body{
	color: #333;
	font-family: Arial, "Kosugi Maru", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
	font-size: 1.6em;
	line-height: 1.6;
	overflow-x: hidden;
	background: #fff;
}
body.bg_l_gray{
	background: #f5f5f5;
}
.confirm{
	background: #ebf2f3;
}
.center{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10%;
}
input[type="text"]{
	width: 100%;
	height: 3em;
	box-sizing: border-box;
}

.block{
	display: block;
}
@media only screen and (min-width:768px) {
	body{
		width: 750px;
		margin: 0 auto;
		background: #f5f5f5;
	}
	br{
		display: none;
	}
}
.inner,.thanksform form{
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.inner .thanksname{
	width: -webkit-fill-available;
	width: -moz-available;
	height: 4rem;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.8rem;
}
select{
	-webkit-appearance: button;
    appearance: button;
	color: #333;
}

textarea{
	border-radius: 0;
	line-height: 1.6;
	font-family: "Kosugi Maru",sans-serif;
}

.form_box,input[type="text"]{
	background-color: #fff;
	padding-left: .3em;
	border: #eaeaea 2px solid;
	box-shadow:2px 3px 10px #f8f8f8 inset;
	text-align: center;
}

.text{
	resize: vertical;
	width:100%;
	margin: 0 auto 2em;
	height:30vh;
	text-align: left;
}

.confirm .contents{
	padding: 1rem 0 2rem .3rem;
}

.thankshtml .center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	padding-top: 0;
}
/*余白,*****************************************/
input[type="text"]{
	margin: .5em 0 2em;
	padding-left: .5em;
	height: 5rem;
}
button{
	padding: .3em 1em;
}
/**form/index**/
.inner dl{
	margin-bottom: 1em;
}
.inner dt{
	padding-left: 0;
	margin-top: 2em;
}
textarea.form_box{
	padding: 1rem;
	padding-left: 1rem;
}
/**form/confirm**/
.confirm form{
	margin: 6rem 0;
}
.confirm .inner dl{
	margin-bottom: 5rem;
}
.back{
	margin-right: 2rem;
}
/**form/thanks**/
p{
	margin-bottom: 1em;
}

/*テキスト調整******************************************/
dl,input[type="text"]{
	text-align: left;
}
.inner form,.inner form dl,.inner{
	text-align: center;
}
input#userPass,input#userId{
	font-size: 1.6rem;
}
textarea{
	font-size: 1.6rem;
}
.rem_14{
	font-size: 1.4rem;
}
.bg_star p{
	font-weight: bold;
	font-size: 2.3rem;
}

/*ボタン調整*****************************************************/
input[type="button"],button{
	-webkit-appearance:none;
	appearance: none;
	color: #fff;
}
.pk_button,.sendthanks{
	background-color:#f26161;
	color: #fff;
	font-weight: bold;
	border: #9f4342 2px solid;
	padding: .8em 1.5em;
}
.back{
	background-color: #bbe2e9;
	font-weight: bold;
	border: #85a1a7 2px solid;
	padding: .8em 1.5em;
}

@media only screen and (min-width:768px) {
	.pk_button{
		padding: 0.8em 3.5em;
        font-size: 16px;
	}
	.back,.confirm .sendthanks{
		padding: .8em 2.5em;
	}
}

input[type="button"]:hover,button:hover,.view:hover{
	opacity: .8;
	cursor: pointer;
	box-shadow: none;
}

/**login**/

/**ありがとうを贈る**/
.login .sendthanks,.view{
	margin-bottom: 2em;
	font-family: "Kosugi Maru",sans-serif;
	border: #9f4342 3px solid;
	box-shadow: 2px 2px 3px #999;
	font-weight: bold;
	color: #fff;
	border-radius: 30px;
	padding: 1em 3em;
}

/**ありがとうを見る**/
.view{
	background-color:#2f9192;
	border:solid 3px #174b4b;
}

.thanksview{
	display: inline-block;
	padding: .8em 3em .8em 4em;
	font-size: 1.6rem;
	margin-top: 1em;
}
@media only screen and (max-width:767px) {
	.thanksview{
		margin-top:0;
	}
}

/**装飾********************************************************/

/**form/index**/
.bg_pk{
	background-color: #f2e9e6;
	border-radius: 0 0 160px 160px;
}
@media only screen and (min-width:768px) {
	.bg_pk{
		border-radius: 0 0 300px 300px;
	}
}

h1{
	width: 90%;
	box-sizing: border-box;
	margin:0 auto;
	padding: 1em 0 1.5em;
	text-align: center;
	font-size: 4.5rem;
	line-height: 1.2;
}
@media only screen and (min-width:768px) {
	h1{
		font-size: 5.5rem;
	}
}
.h1_block{
	display: block;
}
.glow_anime span{opacity: 0;}
.glow_anime.glow span{ animation:glow_anime_on 2s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	25% { opacity:1;text-shadow: 0 0 10px #f9d2b3,0 0 15px #f9d2b3; }
	35% { opacity:1;text-shadow: 0 0 10px #dfe4b3,0 0 15px #dfe4b3; }
	45% { opacity:1;text-shadow: 0 0 10px #c5e0ea,0 0 15px #c5e0ea; }
	55% { opacity:1;text-shadow: 0 0 10px #f9d2d9,0 0 15px #f9d2d9; }
	65% { opacity:1;text-shadow: 0 0 10px #e3d0f3,0 0 15px #e3d0f3; }
	75% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	100%{ opacity:1; text-shadow: 0 0 0}
}

h2{
	font-size: 1.8rem;
	margin-bottom: 1em;
	line-height: 1.3;
	text-align: center;
	position: relative;
	top:-50px;
}
h2::before{
	content: "/";
	display: inline-block;
	transform: scale(-1,1);
	margin-right: 5px;
	font-size: 2rem;
}
h2::after{
	content: "/";
	padding-left: 5px;
	font-size: 2rem;
}
.point{
	background-image: url(../images/collarline.png),url(../images/collarline.png);
	background-repeat: repeat-x,repeat-x;
	background-position: top,bottom;
    background-color: #fcfcf0;
    padding: 1em 1.5em;
	margin-top: -3em;
	margin-bottom: 30px;
}
@media only screen and (min-width:768px) {
	.point{
		margin-top: -2em;
		margin-bottom: 60px;
		position: relative;
		z-index: 1;
	}
}
.ma_top{
	margin-top: 25px;
	margin-bottom: 0;
	font-size: 1.4rem;
}
.user_name{
	font-size: 1.8rem;
	display: inline-block;
	padding-right: .5rem;
}

.thanks{
	background:linear-gradient(transparent 40%, #f9d2d9 60%)
}
@media only screen and (min-width:768px) {
	.thanks{
		font-size: 18px;
	}
}

.thanksview_link{
	text-decoration: underline;
}
.starTxt{
	color: #323324;
	position: relative;
	display: inline;
}
.starTxt::before{
	display: block;
	position: absolute;
	content: '';
	top: -4px;
	bottom: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	background: url(../images/icon_star_view.png) no-repeat center center;
	background-size: 22px 22px;
	left: -29px;
}

.thanksform{
	background-color:#ebf2f3;
	padding: 4.8rem 0;
}
@media only screen and (min-width:768px) {
	.thanksform{
		padding: 16rem 0;
        margin-top: -155px;
	}
}

form{
	background-color: #fff;
	box-shadow: 3px 5px 10px #eaeaea;
	padding: 1rem 0 4rem;
}

@media only screen and (min-width:768px) {
	.thanksform form,.confirm form{
		padding: 3rem 0 6rem;
	}
}

.inner dt{
	font-weight: bolder;
	background-color: #f5f5f5;
	border: #eaeaea 2px solid;
	border-bottom: none;
	color: #545454;
	padding: .5rem;
	font-size: 1.4rem;
}

@media only screen and (min-width:768px) {
	.inner dt{
		font-size: 16px;
	}
}

/**form/thanks**/
.bg_star{
	overflow: hidden;
	padding: 0 2rem;
}
.thankshtml .center {
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg_star::before{
	content: "";
	background-image: url(../view/img/icon_star3.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-color:rgba(245,245,245,0.7);
	background-blend-mode:lighten;
	background-position: center;
	display: block;
	height: 100vh;
	display: flex;
	align-items: center;
	animation: rotate 20s cubic-bezier(0.5, 0.51, 0.51, 0.52) infinite;
}
@keyframes rotate{
	0%{
		transform: rotateZ(0);
	}
	100%{
		transform: rotateZ(360deg);
	}
}
.thankshtml .bg_star p{
	animation: none;
}
.bg_star .glow_anime{
	padding-top: 3em;
}

/**ログイン画面**/
.login{
	width: 90%;
	max-width: 380px;
}
.login form{
	padding: 40px;
	border-radius: 10px;
	box-shadow: none;
}
.login h1{
	padding: 0 0 20px;
	font-size: 2.2rem;
	text-align: center;
}
.login .login-inputBox {
	margin-bottom: 15px;
}
.login .login-inputBox dt {
	margin-bottom: 5px;
}
.login .login-txtBox {
	border-radius: 5px;
	border: 1px solid #ddd;
	box-shadow: none;
	height: 2.8em;
	padding: 0 10px;
	margin: 0 auto 15px;
}
.login .login-txtBox::placeholder {
	color: #888;
}
.login .login-txtBox:focus {
	outline: none !important;
}
.login .btn-login__send,
.login .btn-login__view {
	font-family: Arial, "Kosugi Maru", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
	border: none;
	font-size: 1.6rem;
	height: 3.0em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1.5em;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	width: 80%;
	max-width: 240px;
	line-height: 1.2;
	margin: 0 auto;
	position: relative;
	padding: 1px 0 0 20px;
}
.login .btn-login__send {
	background: #ff9900;
	margin-bottom: 20px;
}
.login .btn-login__view {
	background: #26bf8c;
}
.login .btn-login__send .btnTxt,
.login .btn-login__view .btnTxt,
.thanksview .btnTxt{
	position: relative;
	display: inline;
	color: #fff;
}
.login .btn-login__send .btnTxt::before,
.login .btn-login__view .btnTxt::before,
.thanksview .btnTxt::before{
	display: block;
	position: absolute;
	content: '';
	top: -4px;
	bottom: 0;
	margin: auto;
}
.login .btn-login__send .btnTxt::before {
	width: 20px;
	height: 20px;
	background: url(/view/img/icon_star_w.svg) no-repeat center center;
	background-size: 20px 20px;
	left: -28px;
}
.login .btn-login__view .btnTxt::before {
	width: 22px;
	height: 22px;
	background: url(/view/img/icon_star_view.svg) no-repeat center center;
	background-size: 22px 22px;
	left: -29px;
}
.thanksview .btnTxt::before{
	width: 22px;
	height: 22px;
	background: url(../view/img/icon_star_view.svg) no-repeat center center;
	background-size: 22px 22px;
	left: -29px;
}

.login .btn-login__send .btnTxt > span,
.login .btn-login__view .btnTxt > span{
	font-size: 1.9rem;
	letter-spacing: .1rem;
	padding-left: 1px;
}
.login .btn-login__send input,
.login .btn-login__view input {
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	border: none;
	padding: 0;
}

@media only screen and (max-width:767px) {
	.login form{
		padding: 40px 30px;
	}
	.login .btn-login__send,
	.login .btn-login__view {
		width: 100%;
	}
}