@charset "utf-8";
/* -----------------------------------------
common.css
サイト共通設定用css

＜class名ルール＞
このファイルで使用するclassには以下の接頭語を付加する。
（他のcssファイルでは不要）
・汎用クラス、モジュール：「.c_xxx」（common）
・フレームモジュール：「.f_xxx」（frame）
・モジュール：「.m_xxx」（module）
・モジュール内のパーツ：「.p_xxx」（parts）
・モジュールの状態：「.s_xxx」（state）
※JSのみで使用：「.js_xxx」
----------------------------------------- */


/* web font
----------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Oswald');


/* reset
----------------------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,input,textarea,table,caption,tbody,thead,tfoot,tr,th,td,
main,article,aside,canvas,details,embed,figure,figcaption,footer,header,
menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,th {
	font-family: inherit;
	font-size: 100%;
	font-weight: normal;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

table,th,td {
	text-align: left;
	border: none;
}

ol,ul,li {
	list-style: none;
}

img {
	border: none;
	vertical-align: top;
	max-width: 100%;
}

input[type=text],
input[type=password],
input[type=button],
input[type=submit],
button,
select,
textarea {
	color: inherit;
	font-family: inherit;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	font-size: 100%;
	font-weight: normal;
	line-height: inherit;
}

input::-webkit-input-placeholder {
	color: #aaa;
}
input:-ms-input-placeholder {
	color: #aaa;
}
input::-moz-placeholder {
	color: #aaa;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
}

select::-ms-expand {
	display:none;
}

*,*:before,*:after {
	box-sizing: border-box;
}


/* 初期設定
----------------------------------------- */

html {
	font-size: 62.5%;
}

body {
	min-width: 320px;
	background-color: #f2f5f8;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 160%;
	color: #333;
	line-height: 1.3;
	-webkit-text-size-adjust: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

em, strong {
	font-weight: bold;
}

*,*::before,*::after {
	box-sizing: border-box;
}


/* 汎用クラス
----------------------------------------- */

.c_fontL  { font-size: 1.8rem; }
.c_fontLL { font-size: 2rem; }
.c_fontXL { font-size: 2.2rem; }
.c_fontS  { font-size: 1.3rem; }
.c_fontSS { font-size: 1.2rem; }
.c_fontXS { font-size: 1.1rem; }

.c_fontBold { font-weight: bold; }
.c_colorRed { color: #ce2e2e; }

.c_clearfix { zoom: 1; }
.c_clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0.01px;
}
.c_floatL { float: left; }
.c_floatR { float: right; }
.c_ofHidden { overflow: hidden; }

.c_taLeft { text-align: left !important; }
.c_taCenter { text-align: center !important; }
.c_taRight { text-align: right !important; }

.c_vaTop { vertical-align: top !important; }
.c_vaMdl { vertical-align: middle !important; }
.c_vaBtm { vertical-align: bottom !important; }

.c_mt0  { margin-top:  0px !important; }
.c_mt3  { margin-top:  3px !important; }
.c_mt5  { margin-top:  5px !important; }
.c_mt10 { margin-top: 10px !important; }
.c_mt15 { margin-top: 15px !important; }
.c_mt20 { margin-top: 20px !important; }
.c_mt25 { margin-top: 25px !important; }
.c_mt30 { margin-top: 30px !important; }
.c_mt35 { margin-top: 35px !important; }
.c_mt40 { margin-top: 40px !important; }
.c_mt45 { margin-top: 45px !important; }
.c_mt50 { margin-top: 50px !important; }
.c_mt60 { margin-top: 60px !important; }
.c_mt70 { margin-top: 70px !important; }
.c_mt80 { margin-top: 80px !important; }
.c_mt90 { margin-top: 90px !important; }

.c_ml0  { margin-left:  0px !important; }
.c_ml3  { margin-left:  3px !important; }
.c_ml5  { margin-left:  5px !important; }
.c_ml10 { margin-left: 10px !important; }
.c_ml15 { margin-left: 15px !important; }
.c_ml20 { margin-left: 20px !important; }
.c_ml25 { margin-left: 25px !important; }
.c_ml30 { margin-left: 30px !important; }
.c_ml35 { margin-left: 35px !important; }
.c_ml40 { margin-left: 40px !important; }
.c_ml45 { margin-left: 45px !important; }
.c_ml50 { margin-left: 50px !important; }
.c_ml60 { margin-left: 60px !important; }
.c_ml70 { margin-left: 70px !important; }
.c_ml80 { margin-left: 80px !important; }
.c_ml90 { margin-left: 90px !important; }

.c_mr0  { margin-right:  0px !important; }
.c_mr3  { margin-right:  3px !important; }
.c_mr5  { margin-right:  5px !important; }
.c_mr10 { margin-right: 10px !important; }
.c_mr15 { margin-right: 15px !important; }
.c_mr20 { margin-right: 20px !important; }
.c_mr25 { margin-right: 25px !important; }
.c_mr30 { margin-right: 30px !important; }
.c_mr35 { margin-right: 35px !important; }
.c_mr40 { margin-right: 40px !important; }
.c_mr45 { margin-right: 45px !important; }
.c_mr50 { margin-right: 50px !important; }
.c_mr60 { margin-right: 60px !important; }
.c_mr70 { margin-right: 70px !important; }
.c_mr80 { margin-right: 80px !important; }
.c_mr90 { margin-right: 90px !important; }

.c_mb0  { margin-bottom:  0px !important; }
.c_mb3  { margin-bottom:  3px !important; }
.c_mb5  { margin-bottom:  5px !important; }
.c_mb10 { margin-bottom: 10px !important; }
.c_mb15 { margin-bottom: 15px !important; }
.c_mb20 { margin-bottom: 20px !important; }
.c_mb25 { margin-bottom: 25px !important; }
.c_mb30 { margin-bottom: 30px !important; }
.c_mb35 { margin-bottom: 35px !important; }
.c_mb40 { margin-bottom: 40px !important; }
.c_mb45 { margin-bottom: 45px !important; }
.c_mb50 { margin-bottom: 50px !important; }
.c_mb60 { margin-bottom: 60px !important; }
.c_mb70 { margin-bottom: 70px !important; }
.c_mb80 { margin-bottom: 80px !important; }
.c_mb90 { margin-bottom: 90px !important; }

.c_hide { display: none !important; }
.c_iBlock { display: inline-block; }

.c_liquid { width: 100%; }

.c_breakall { word-break: break-all; }
.c_nowrap { white-space: nowrap; }

.c_over:hover {
	opacity: 0.7;
}

@media screen and (max-width: 1300px){ .c_ov1300 { display: none !important; } }
@media screen and (max-width: 1200px){ .c_ov1200 { display: none !important; } }
@media screen and (max-width: 1100px){ .c_ov1100 { display: none !important; } }
@media screen and (max-width: 1000px){ .c_ov1000 { display: none !important; } }
@media screen and (max-width: 900px){ .c_ov900 { display: none !important; } }
@media screen and (max-width: 800px){ .c_ov800 { display: none !important; } }
@media screen and (max-width: 767px){ .c_ov767 { display: none !important; } }
@media screen and (max-width: 700px){ .c_ov700 { display: none !important; } }
@media screen and (max-width: 600px){ .c_ov600 { display: none !important; } }
@media screen and (max-width: 500px){ .c_ov500 { display: none !important; } }
@media screen and (max-width: 400px){ .c_ov400 { display: none !important; } }
@media screen and (min-width: 1301px){ .c_ud1300 { display: none !important; } }
@media screen and (min-width: 1201px){ .c_ud1200 { display: none !important; } }
@media screen and (min-width: 1101px){ .c_ud1100 { display: none !important; } }
@media screen and (min-width: 1001px){ .c_ud1000 { display: none !important; } }
@media screen and (min-width: 901px){ .c_ud900 { display: none !important; } }
@media screen and (min-width: 801px){ .c_ud800 { display: none !important; } }
@media screen and (min-width: 768px){ .c_ud767 { display: none !important; } }
@media screen and (min-width: 701px){ .c_ud700 { display: none !important; } }
@media screen and (min-width: 601px){ .c_ud600 { display: none !important; } }
@media screen and (min-width: 501px){ .c_ud500 { display: none !important; } }
@media screen and (min-width: 401px){ .c_ud400 { display: none !important; } }
@media screen and (min-width: 351px){ .c_ud350 { display: none !important; } }


/* ページフレーム
----------------------------------------- */

.f_pageArea {
}

.f_header {
	position: sticky;
	top: 0;
	z-index: 1000;
	margin-bottom: 50px;
	height: 80px;
	background-color: #ea6100;
	padding: 9px 30px;
}
.f_header .p_text {
	position: absolute;
	top: 24px;
	left: 100px;
	color: #fff;
	font-size: 2rem;
}
.f_header .p_menu {
	position: absolute;
	top: 20px;
	right: 40px;
	display: flex;
	align-items: center;
}
.f_header .p_menu a:hover {
	opacity: 0.8;
}
.f_header .p_loginBtn {
	background: url(../img/icon_login.svg) no-repeat 18px 50% #fff;
	border-radius: 3px;
	padding: 10px 15px 9px 55px;
}
.f_header .p_uploadBtn {
	display: block;
	background: url(../img/icon_upload.svg) no-repeat 14px 50% #fff;
	border-radius: 3px;
	padding: 10px 15px 9px 50px;
}
.f_header .p_mypageBtn {
	margin-left: 25px;
	display: block;
	width: 40px;
	height: 40px;
	background: url(../img/icon_login.svg) no-repeat 50% 50% #fff;
	border-radius: 50%;
}
@media screen and (max-width: 1200px){
	.f_header {
		padding: 9px 10px;
	}
	.f_header .p_text {
		top: 16px;
		left: 80px;
		font-size: 1.8rem;
	}
	.f_header .p_menu {
		right: 20px;
	}
}
@media screen and (max-width: 767px){
	.f_header {
		margin-bottom: 30px;
		height: 60px;
		padding: 8px 5px;
	}
	.f_header .p_logo {
		width: 144px;
	}
	.f_header .p_text {
		top: 14px;
		left: 55px;
		font-size: 1.2rem;
	}
	.f_header .p_menu {
		top: 9px;
		right: 10px;
	}
	.f_header .p_loginBtn {
		background-position: 10px 50%;
		padding: 5px 15px 5px 40px;
		font-size: 1.3rem;
	}
	.f_header .p_uploadBtn {
		background-position: 10px 50%;
		padding: 10px 15px 9px 40px;
		font-size: 1.4rem;
	}
	.f_header .p_mypageBtn {
		margin-left: 10px;
	}
}
@media screen and (max-width: 600px){
	.f_header .p_text {
		top: 7px;
		font-size: 1.1rem;
	}
	.f_header .p_uploadBtn {
		padding: 5px 15px 5px 40px;
		font-size: 1.3rem;
	}
}
@media screen and (max-width: 360px){
	.f_header .p_text {
		top: 8px;
		left: 50px;
		font-size: 1rem;
	}
	.f_header .p_loginBtn {
		padding: 5px 10px 5px 40px;
		font-size: 1.2rem;
	}
	.f_header .p_uploadBtn {
		background-position: 6px 50%;
		background-size: 18px auto;
		padding: 5px 10px 5px 30px;
		font-size: 1.2rem;
	}
	.f_header .p_mypageBtn {
		width: 36px;
		height: 36px;
	}
}

.f_main {
	padding: 0 30px 80px;
}
@media screen and (max-width: 767px){
	.f_main {
		padding: 0 5% 60px;
	}
}

.f_movieArea {
	max-width: 1000px;
	margin: 0 auto;
}

.f_centerBox {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 210px);
}
.f_centerBox .p_box {
	width: 100%;
	max-width: 600px;
	min-height: 500px;
	border-radius: 20px;
	background-color: #fff;
	padding: 100px 30px;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.16);
}
.f_centerBox .p_box > .p_inner {
	max-width: 330px;
	margin: 0 auto;
}
.f_centerBox .p_title {
	margin-bottom: 40px;
	border-bottom: 2px solid #17a2b8;
	padding-bottom: 10px;
	text-align: center;
	color: #17a2b8;
	font-size: 3.6rem;
	font-weight: bold;
}
@media screen and (max-width: 767px){
	.f_centerBox {
		min-height: calc(100vh - 150px);
	}
	.f_centerBox .p_box {
		min-height: 0;
		padding: 50px 30px;
	}
	.f_centerBox .p_title {
		margin-bottom: 30px;
		font-size: 2.6rem;
	}
}


/* 汎用モジュール
----------------------------------------- */

/* section */

/* title */

.m_sectionTitle {
	margin: 70px 0 30px;
	border-left: 4px solid #17a2b8;
	padding-left: 8px;
	color: #17a2b8;
	font-size: 2.4rem;
	line-height: 1.2;
}
.m_sectionTitle:first-child {
	margin-top: 0;
}
.m_sectionTitle small {
	margin-left: 20px;
	vertical-align: 3px;
	font-size: 1.4rem;
	color: #333;
}
@media screen and (max-width: 767px){
	.m_sectionTitle {
		margin: 50px 0 30px;
		font-size: 2rem;
	}
	.m_sectionTitle small {
		margin: 8px 0 0;
		display: block;
	}
}

/* text */

/* link */

.m_mrkLink {
	text-decoration: underline;
}
.m_mrkLink:hover {
	text-decoration: none;
}
.m_mrkLink::after {
	content: '';
	display: inline-block;
	vertical-align: 1px;
	margin-left: 6px;
	width: 6px;
	height: 10px;
	background: url(../img/mrk_02.svg) no-repeat 0 0;
}

/* list */

.m_tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.m_tagList:empty {
	display: none;
}
.m_tagList li {
	background-color: #fff;
	border: 1px solid #707070;
	border-radius: 3px;
	padding: 5px 12px;
}
.m_tagList .p_delete {
	position: relative;
	margin: 0 -5px 0 10px;
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: -4px;
	cursor: pointer;
}
.m_tagList .p_delete::before,
.m_tagList .p_delete::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 20px;
	height: 2px;
	margin: auto;
	background-color: #000;
	transform: rotate(45deg);
}
.m_tagList .p_delete::after {
	transform: rotate(-45deg);
}

/* btn */

.m_submitBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 48px;
	background: url(../img/mrk_01.svg) no-repeat 95% 50% #17a2b8;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 2.4rem;
	cursor: pointer;
	transition: opacity 0.2s;
}
.m_submitBtn:hover {
	opacity: 0.8;
}
.m_submitBtn.s_delete {
	background-color: #d63a26;
}
@media screen and (max-width: 767px){
	.m_submitBtn {
		font-size: 2rem;
	}
}

.m_linkBtn {
	display: inline-block;
	min-width: 160px;
	border: 1px solid #999;
	border-radius: 6px;
	background: url(../img/mrk_03.svg) no-repeat 92% 50% #fff;
	padding: 10px 36px 10px 20px;
	text-align: center;
	font-size: 2rem;
	color: #999;
}
.m_linkBtn:hover {
	opacity: 0.8;
}

.m_backBtn {
	display: inline-block;
	min-width: 160px;
	border: 1px solid #999;
	border-radius: 6px;
	background: url(../img/mrk_04.svg) no-repeat 18px 50% #fff;
	padding: 10px 20px 10px 36px;
	text-align: center;
	font-size: 2rem;
	color: #999;
	cursor: pointer;
}
.m_backBtn:hover {
	opacity: 0.8;
}
.m_backBtn.w_100p {
	width: 100%;
}
@media screen and (max-width: 767px){
	.m_backBtn {
		min-width: 140px;
		background-position: 12px 50%;
		padding: 10px 15px 10px 25px;
		font-size: 1.8rem;
	}
}

/* box */

/* img */

/* layout */

/* table */

/* form */

.m_textbox {
	width: 100%;
	max-width: 435px;
	border: 1px solid #17a2b8;
	border-radius: 6px;
	background-color: #fff;
	height: 48px;
	padding: 10px 25px;
	font-size: 2rem !important;
}
.m_textbox.s_w100p {
	max-width: none;
}
@media screen and (max-width: 767px){
	.m_textbox {
		padding: 10px 15px;
		font-size: 1.6rem !important;
	}
}

.m_textarea {
	width: 100%;
	border: 1px solid #17a2b8;
	border-radius: 6px;
	background-color: #fff;
	height: 150px;
	padding: 10px 25px;
	font-size: 2rem;
}
@media screen and (max-width: 767px){
	.m_textarea {
		padding: 10px 15px;
		font-size: 1.6rem;
	}
}

.m_passwordInput {
	position: relative;
	padding-right: 35px;
}
.m_passwordInput .p_toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	background: url(../img/icon_passwd_hide.svg) no-repeat 50% 50%;
	cursor: pointer;
}
.m_passwordInput .p_toggle.s_show {
	background-image: url(../img/icon_passwd_show.svg);
}

.m_select {
	display: inline-block;
	min-width: 260px;
	border: 1px solid #17a2b8;
	border-radius: 6px;
	background: url(../img/mrk_05.svg) no-repeat 95% 50% #fff;
}
.m_select select {
	border: none;
	width: 100%;
	height: 46px;
	background-color: transparent;
	padding: 10px 15px;
	font-size: 2rem;
	cursor: pointer;
}

.m_uploadBtn {
	position: relative;
	transition: opacity 0.2s;
}
.m_uploadBtn:hover {
	opacity: 0.8;
}
.m_uploadBtn input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.01;
}
.m_uploadBtn > span {
	display: block;
	background: url(../img/icon_upload.svg) no-repeat 14px 50% #fff;
	border: 1px solid #999;
	border-radius: 7px;
	padding: 10px 15px 9px 50px;
	color: #999;
	font-size: 2rem;
}
.m_uploadBtn .p_fileName {
	position: absolute;
	top: 115%;
	left: 0;
	white-space: nowrap;
}
.m_uploadBtn .p_fileName:empty {
	display: none;
}

.m_progress {
	position: relative;
	margin-top: 60px;
	height: 8px;
	border-radius: 4px;
	background-color: #d9d9d9;
}
.m_progress .p_bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 8px;
	border-radius: 4px;
	background-color: #17a2b8;
	transition: width 0.1s;
}
.m_progress .p_percent {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 54px;
	border-radius: 6px;
	background: #17a2b8;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	transform: translateX(50%);
}
.m_progress .p_percent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	border-top: 6px solid #17a2b8;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	width: 0;
	margin: 0 auto;
}

.m_formList {
	margin-bottom: 45px;
	max-width: 435px;
	font-size: 1.4rem;
}
.m_formList > li {
	margin-bottom: 25px;
	border-bottom: 1px solid #000;
	padding-bottom: 8px;
	display: flex;
	align-items: center;
}
.m_formList > li.s_hasNote {
	margin-bottom: 45px;
}
.m_formList .p_label {
	width: 110px;
	flex-shrink: 0;
}
.m_formList .p_label small {
	display: block;
	font-size: 1.2rem;
}
.m_formList .p_input {
	position: relative;
	flex-grow: 1;
}
.m_formList .p_input .p_text {
	padding: 7px 0;
}
.m_formList .p_textbox {
	border: none;
	width: 100%;
	height: 35px;
	background-color: transparent;
}
.m_formList .p_note {
	position: absolute;
	left: 0;
	bottom: -30px;
	color: #f83d61;
	font-size: 1.2rem;
}
@media screen and (min-width: 1050px){
	.m_formList.s_mypage {
		font-size: 1.6rem;
	}
	.m_formList.s_mypage > li {
		margin-bottom: 35px;
	}
	.m_formList.s_mypage .p_note {
		left: 105%;
		bottom: 8px;
		white-space: nowrap;
	}
}

.m_formError {
	margin: 0 0 25px;
	max-width: 435px;
	border: 1px solid #f83d61;
	background-color: #fff;
	padding: 8px;
	text-align: center;
	color: #f83d61;
}
.m_formList .m_formError,
.m_uploadText + .m_formError {
	margin-top: -20px;
}
.m_formError:empty {
	display: none;
}
@media screen and (max-width: 767px){
	.m_formError {
		font-size: 1.4rem;
	}
}

.m_formBtnArea {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	gap: 20px;
}
.m_formBtnArea .m_submitBtn {
	max-width: 160px;
}
.m_formBtnArea .m_submitBtn.s_w100p {
	max-width: none;
}
@media screen and (max-width: 767px){
	.m_formBtnArea {
		margin-top: 40px;
	}
}
@media screen and (max-width: 500px){
	.m_formBtnArea.s_movie {
		position: relative;
		padding-bottom: 60px;
	}
	.m_formBtnArea.s_movie .m_backBtn {
		position: absolute;
		bottom: 0;
	}
}

/* modal */

.m_modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5000;
	background-color: rgba(0,0,0,0.5);
	padding-top: 50px;
	display: none;
	justify-content: center;
	align-items: center;
}
.m_modal .p_window {
	position: relative;
	border-radius: 20px;
	background-color: #fff;
	padding: 80px 20px;
	width: 500px;
	max-width: 96.5%;
	flex-shrink: 0;
	font-size: 1.8rem;
}
.m_modal .p_closeBtn {
	position: absolute;
	top: -40px;
	right: -30px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.m_modal .p_closeBtn::before,
.m_modal .p_closeBtn::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background-color: #fff;
	transform: rotate(45deg);
}
.m_modal .p_closeBtn::after {
	transform: rotate(-45deg);
}
@media screen and (max-width: 767px){
	.m_modal {
		padding-top: 10vw;
	}
	.m_modal .p_window {
		border-radius: 4vw;
		padding: 8vw 2.6vw;
	}
	.m_modal .p_closeBtn {
		top: -12vw;
		right: 0;
		width: 10vw;
		height: 10vw;
	}
	.m_modal .p_closeBtn::before,
	.m_modal .p_closeBtn::after {
		width: 10vw;
		height: 0.6vw;
	}
	.m_modal .p_scrollArea {
		max-height: calc(100vh - 35vw);
	}
}

/* 専用モジュール
----------------------------------------- */

/* トップページ */

.m_serchBox {
	max-width: 1200px;
	margin: 0 auto 40px;
	border-radius: 5px;
	border: 1px solid #ced4da;
	overflow: hidden;
	background: #fff;
	display: flex;
}
.m_serchBox input {
	width: 100%;
	border: none;
	height: 48px;
	padding: 10px 15px;
}
.m_serchBox button {
	border: none;
	background: url(../img/icon_search.svg) no-repeat 50% 50% #a6adb4;
	border-left: 1px solid #ced4da;
	width: 100px;
	flex-shrink: 0;
	transition: opacity 0.2s;
	cursor: pointer;
}
.m_serchBox button:hover {
	opacity: 0.8;
}
@media screen and (max-width: 767px){
	.m_serchBox {
		margin: 0 auto 30px;
	}
	.m_serchBox input {
		height: 40px;
		padding: 5px 10px;
	}
	.m_serchBox button {
		background-size: 24px auto;
		width: 70px;
	}
}

.m_movieList {
	max-width: 1620px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 2.93%;
}
.m_movieList > li {
	width: 22.8%;
}
.m_movieList a {
	display: block;
	height: 100%;
	background-color: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.m_movieList a:hover {
	opacity: 0.8;
}
.m_movieList .p_img {
	padding-top: 56.22%;
	background-size: cover;
	background-position: 50% 50%;
}
.m_movieList .p_info {
	position: relative;
	padding: 15px 10px 15px 80px;
	min-height: 90px;
}
.m_movieList .p_userImg {
	position: absolute;
	top: 14px;
	left: 8px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-size: cover;
	background-position: 50% 50%;
}
.m_movieList h2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	font-size: 2rem;
	font-weight: bold;
}
.m_movieList .p_user {
	margin-top: 8px;
}
.m_movieList .p_registDay {
	margin-top: 8px;
	background: url(/common/img/icon_regist.svg) no-repeat 0 50%;
	background-size: 16px 16px;
	padding-left: 22px;
	font-size: 1.4rem;
}
@media screen and (max-width: 1300px){
	.m_movieList {
		gap: 20px 3.5%;
	}
	.m_movieList > li {
		width: 31%;
	}
}
@media screen and (max-width: 800px){
	.m_movieList {
		gap: 30px 4%;
	}
	.m_movieList > li {
		width: 48%;
	}
}
@media screen and (max-width: 600px){
	.m_movieList {
		gap: 30px 0;
	}
	.m_movieList > li {
		width: 100%;
	}
	.m_movieList h2 {
		font-size: 1.8rem;
	}
}

/* 再生画面 */

.m_player {
	border: 1px solid #17a2b8;
	background-color: #fff;
}
.m_player .p_movie {
	padding: 32px 49px;
}
.m_player .p_movie .p_inner {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}
.m_player .p_movie video {
	position: absolute;
	top: 0;
	left: 0;
	width: 400%;
}
.m_player .p_controls {
	position: relative;
	border-top: 1px solid #17a2b8;
	padding: 20px 50px;
	height: 125px;
}
.m_player .p_seek {
	position: relative;
	height: 14px;
}
.m_player .p_bar {
	position: relative;
}
.m_player .p_bar::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 2px;
	background-color: #d9d9d9;
}
.m_player .p_bar > div {
	position: absolute;
	top: 5px;
	left: 0;
	width: 0;
	height: 4px;
	border-radius: 2px 0 0 2px;
	background-color: #17a2b8;
}
.m_player .p_bar div div {
	position: absolute;
	top: -5px;
	left: 100%;
	width: 14px;
	height: 14px;
	background-color: #fff;
	border: 1px solid #707070;
	border-radius: 50%;
	cursor: pointer;
}
.m_player .p_playBtn,
.m_player .p_pauseBtn {
	position: absolute;
	left: 50px;
	bottom: 18px;
	width: 54px;
	height: 54px;
	background-color: #17a2b8;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s;
}
.m_player .p_playBtn:hover,
.m_player .p_pauseBtn:hover {
	opacity: 0.8;
}
.m_player .p_pauseBtn {
	display: none;
}
.m_player .p_playBtn::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 22px;
	border-left: 14px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}
.m_player .p_pauseBtn::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 18px;
	width: 18px;
	height: 24px;
	border-left: 5px solid #fff;
	border-right: 5px solid #fff;
}
.m_player .p_volume {
	position: absolute;
	left: 140px;
	bottom: 52px;
	width: 120px;
	padding-left: 40px;
}
.m_player .p_volumeBtn {
	position: absolute;
	top: -9px;
	left: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.m_player .p_volumeBtn .p_on {
	margin-left: 5px;
}
.m_player .p_volume.s_mute .p_volumeBtn .p_on {
	display: none;
}
.m_player .p_volume.s_mute .p_bar div {
	display: none;
}
.m_player .p_time {
	position: absolute;
	left: 280px;
	bottom: 33px;
	font-size: 18px;
}
.m_player .p_time span:first-child {
	color: #17a2b8;
}
@media screen and (max-width: 1000px){
	.m_player .p_movie {
		padding: 20px 25px;
	}
	.m_player .p_controls {
		padding: 20px 25px;
	}
	.m_player .p_playBtn,
	.m_player .p_pauseBtn {
		left: 25px;
	}
	.m_player .p_volume {
		left: 105px;
	}
	.m_player .p_time {
		left: 250px;
	}
}
@media screen and (max-width: 600px){
	.m_player {
		margin: 0 -5vw;
	}
	.m_player .p_movie {
		padding: 5px;
	}
	.m_player .p_controls {
		padding: 15px;
		height: 100px;
	}
	.m_player .p_playBtn,
	.m_player .p_pauseBtn {
		left: 15px;
		bottom: 12px;
		width: 44px;
		height: 44px;
	}
	.m_player .p_playBtn::after {
		top: 12px;
		left: 17px;
		border-top-width: 10px;
		border-bottom-width: 10px;
	}
	.m_player .p_pauseBtn::after {
		top: 12px;
		left: 14px;
		width: 16px;
		height: 20px;
	}
	.m_player .p_volume {
		left: 80px;
		bottom: 41px;
	}
	.m_player .p_time {
		left: 220px;
		bottom: 24px;
		font-size: 16px;
	}
}

.m_movieInfo {
	margin-top: 30px;
}
.m_movieInfo .p_title {
	margin-bottom: 15px;
	font-size: 2.8rem;
	font-weight: bold;
}
.m_movieInfo .p_main {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 30px;
	padding-left: 70px;
	font-size: 1.8rem;
}
.m_movieInfo .p_user {
	display: flex;
	align-items: center;
	margin-left: -70px;
}
.m_movieInfo .p_user .p_img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-size: cover;
	background-position: 50% 50%;
}
.m_movieInfo .p_user > span {
	margin-left: 20px;
	font-size: 2rem;
}
.m_movieInfo .p_count {
	background: url(/common/img/icon_count.svg) no-repeat 10px 50%;
	padding-left: 40px;
}
.m_movieInfo .p_registDay {
	background: url(/common/img/icon_regist.svg) no-repeat 10px 50%;
	padding-left: 40px;
}
.m_movieInfo .p_subArea {
	padding-left: 80px;
}
.m_movieInfo .p_detail {
	margin-top: 5px;
	font-size: 1.8rem;
}
.m_movieInfo .p_detail.s_oneline {
	height: 1.3em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media screen and (max-width: 767px){
	.m_movieInfo {
		margin-top: 25px;
	}
	.m_movieInfo .p_title {
		font-size: 2.4rem;
	}
	.m_movieInfo .p_main {
		margin-bottom: 25px;
		padding-left: 0;
		gap: 20px 40px;
		font-size: 1.6rem;
	}
	.m_movieInfo .p_user {
		margin-left: 0;
		width: 100%;
	}
	.m_movieInfo .p_user > span {
		font-size: 1.8rem;
	}
	.m_movieInfo .p_subArea {
		padding-left: 0;
	}
	.m_movieInfo .p_detail {
		font-size: 1.6rem;
	}
}

.m_tag {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.m_tag li a {
	display: block;
	background-color: #fff;
	border: 1px solid #707070;
	border-radius: 3px;
	padding: 3px 10px;
}
.m_tag li a:hover {
	opacity: 0.8;
}
.m_tag li a::before {
	content: '#';
}

/* マイページ */

.m_mypageMain {
	position: relative;
	max-width: 1350px;
	margin: 0 auto 45px;
	padding: 0 220px;
}
.m_mypageMain.s_w1200 {
	max-width: 1200px;
}
.m_mypageMain .p_user {
	text-align: center;
}
.m_mypageMain .p_img {
	margin: 0 auto 25px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-size: contain;
	background-position: 50% 50%;
}
.m_mypageMain .p_userName {
	margin-bottom: 5px;
	color: #17a2b8;
	font-size: 2.8rem;
	font-weight: bold;
}
.m_mypageMain .p_accountId {
	font-size: 2.4rem;
}
.m_mypageMain .p_btnArea {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 200px;
}
.m_mypageMain .p_btnArea.s_back {
	left: 0;
	right: auto;
}
.m_mypageMain .p_btnArea a {
	margin-top: 15px;
	display: block;
}
@media screen and (max-width: 767px){
	.m_mypageMain {
		padding: 0;
	}
	.m_mypageMain .p_user {
		margin-bottom: 30px;
	}
	.m_mypageMain .p_img {
		width: 160px;
		height: 160px;
	}
	.m_mypageMain .p_userName {
		font-size: 2.4rem;
	}
	.m_mypageMain .p_accountId {
		font-size: 2rem;
	}
	.m_mypageMain .p_btnArea {
		position: static;
		margin: 0 auto;
	}
}

.m_movieTableArea {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.m_movieTable {
	margin: 0 auto;
	display: table;
	border-spacing: 4px;
	width: 100%;
	max-width: 1360px;
	min-width: 700px;
}
.m_movieTable .p_head {
	display: table-row;
}
.m_movieTable .p_head > div {
	display: table-cell;
	background-color: #17a2b8;
	height: 70px;
	padding: 10px 5px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
}
.m_movieTable .p_data {
	display: table-row;
	cursor: pointer;
}
.m_movieTable .p_data > div {
	display: table-cell;
	background-color: #fff;
	padding: 15px 10px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	font-size: 1.8rem;
}
.m_movieTable .p_data:hover > div {
	background-color: #e0f4f7;
}
.m_movieTable .p_data .p_thumnail {
	width: 250px;
	padding: 12px 10px;
}
.m_movieTable .p_data .p_title {
	padding: 15px;
	text-align: left;
}
.m_movieTable .p_data .p_duration {
	width: 10.7%;
}
.m_movieTable .p_data .p_public {
	width: 10.7%;
}
.m_movieTable .p_data .p_date {
	width: 10.7%;
}
.m_movieTable .p_data .p_count {
	width: 10.7%;
}
@media screen and (max-width: 1250px){
	.m_movieTable .p_head > div {
		font-size: 1.8rem;
	}
	.m_movieTable .p_data > div {
		font-size: 1.6rem;
	}
	.m_movieTable .p_data .p_thumnail {
		width: 200px;
	}
	.m_movieTable .p_data .p_date {
		width: 14%;
	}
}
@media screen and (max-width: 1000px){
	.m_movieTable .p_head > div {
		font-size: 1.5rem;
	}
	.m_movieTable .p_data > div {
		padding: 15px 10px;
		font-size: 1.4rem;
	}
	.m_movieTable .p_data .p_thumnail {
		width: 160px;
	}
}
@media screen and (max-width: 767px){
	.m_movieTableArea {
		margin: 0 -5vw;
		padding: 0 5vw;
	}
}


/* アカウント設定 */

.m_accountConfig {
	display: flex;
	justify-content: space-between;
	max-width: 1380px;
	margin: 0 auto;
}
.m_accountConfig .p_col {
	width: 48%;
}
.m_accountConfig .p_userImg {
	display: flex;
	align-items: center;
}
.m_accountConfig .p_userImg .p_img {
	margin-right: 35px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-size: contain;
	background-position: 50% 50%;
	flex-shrink: 0;
}
@media screen and (max-width: 1050px){
	.m_accountConfig .p_userImg .p_img {
		width: 160px;
		height: 160px;
	}	
}
@media screen and (max-width: 1000px){
	.m_accountConfig {
		display: block;
		max-width: 440px;
	}
	.m_accountConfig .p_col {
		width: auto;
	}
	.m_accountConfig .p_col + .p_col {
		margin-top: 50px;
	}
}
@media screen and (max-width: 480px){
	.m_accountConfig .p_userImg {
		flex-direction: column;
	}
	.m_accountConfig .p_userImg .p_img {
		margin: 0 auto 25px;
	}
}

/* 動画設定 */

.m_movieConfig {
	max-width: 1200px;
	margin: 0 auto;
}
.m_movieConfig .p_form > li {
	margin-bottom: 20px;
}
.m_movieConfig .p_form .p_label {
	margin-bottom: 10px;
	color: #17a2b8;
	font-size: 2.4rem;
}
.m_movieConfig .p_form .p_label small {
	font-size: 1.8rem;
}
.m_movieConfig .p_form .p_label small:not(.s_required) {
	color: #999;
}
.m_movieConfig .p_colArea {
	margin-top: 60px;
	display: flex;
}
.m_movieConfig .p_colArea .p_col:first-child {
	width: 60%;
	min-width: 580px;
}
.m_movieConfig .p_thumbnail {
	display: flex;
	align-items: center;
}
.m_movieConfig .p_thumbnail .p_img {
	width: 300px;
	margin-right: 25px;
}
@media screen and (max-width: 900px){
	.m_movieConfig .p_colArea {
		display: block;
	}
	.m_movieConfig .p_colArea .p_col:first-child {
		margin-bottom: 60px;
		width: auto;
		min-width: 0;
	}
}
@media screen and (max-width: 767px){
	.m_movieConfig .p_form .p_label {
		font-size: 2rem;
	}
	.m_movieConfig .p_form .p_label small {
		font-size: 1.6rem;
	}
	.m_movieConfig .p_thumbnail {
		flex-direction: column;
	}
	.m_movieConfig .p_thumbnail .p_img {
		margin: 0 0 20px;
	}
}

.m_tagInput {
	margin-top: 20px;
	display: flex;
}
.m_tagInput .m_submitBtn {
	margin-left: 20px;
	background-image: none;
	width: 120px;
	flex-shrink: 0;
	font-size: 2rem;
}
@media screen and (max-width: 767px){
	.m_tagInput .m_submitBtn {
		width: 90px;
	}
}

/* アップロード */

.m_uploadText {
	margin: 50px 0 60px;
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.6;
}
@media screen and (max-width: 767px){
	.m_uploadText {
		margin: 40px 0;
	}
}

.m_movieUploadBtn {
	position: relative;
	transition: opacity 0.2s;
}
.m_movieUploadBtn:hover {
	opacity: 0.8;
}
.m_movieUploadBtn input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.01;
}

/* 検索 */

.m_searchResult {
	max-width: 1200px;
	margin: 0 auto;
}
.m_searchResult > li {
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
}
.m_searchResult .p_imgArea {
	width: 34.2%;
}
.m_searchResult .p_imgArea a {
	display: block;
	padding-top: 56.22%;
	background-size: cover;
	background-position: 50% 50%;
}
.m_searchResult .p_imgArea a:hover {
	opacity: 0.8;
}
.m_searchResult .p_info {
	width: 63.3%;
}
@media screen and (max-width: 600px){
	.m_searchResult > li {
	margin-bottom: 40px;
		display: block;
	}
	.m_searchResult .p_imgArea {
		width: 100%;
		margin: 0 auto 20px;
	}
	.m_searchResult .p_info {
		width: auto;
	}
}


/* マージンキャンセル
----------------------------------------- */

*:first-child {
	margin-top: 0;
}
*:last-child {
	margin-bottom: 0;
}