@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/************************************
** お問い合わせフォームの入力
************************************/
/* Contact Form 7 */
/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #f58694; /* 背景色 */
	border-radius: 5px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を見やすくする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: #eff1f5; /* 背景色 */
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%; /* 好みで60〜80%でもOK */
	height: 60px;
	border-color: #f58694; /* 枠線の色 */
	background: #f58694; /* ボタンの色 */
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	border-radius: 2px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}



/************************************
** 7thと同じオプトイン登録フォーム
************************************/

/* 7thと同じオプトイン登録フォーム */
#mail_form_7th table, #mail_form_7th tr, #mail_form_7th td {
	border-color: transparent;
	background-color: transparent;}
#mail_form_7th tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: transparent;}
#mail_form_7th .opt_blue {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #3199f1;}
#mail_form_7th .opt_black {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #333333;}
#mail_form_7th .opt_green {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #16d1b8;}
#mail_form_7th .opt_orange {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #e88600;}
#mail_form_7th .opt_pink {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #f58694;}
#mail_form_7th .opt_white {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #ffffff;}
#mail_form_7th .opt_yellow {
	width: 100%;
	margin: 40px auto;
	padding: 1px;
	background: #f7f1a1;}
#mail_form_7th .opt-in {
	margin: 0;
	padding: 20px 10px 10px;
	border: 1px solid #ffffff;
	text-align: center;
	overflow: hidden;}
#mail_form_7th .opt-in input:focus {
	background-color: #FFC;}
#mail_form_7th p.opt-catch {
	font-size: 23px;
	font-weight: bold;
	line-height: 170%;
	color: #ffffff;
	text-align: center;
	margin: 10px 0;
	padding: 0;}
#mail_form_7th table.form_mail {
	width: 90%;
	font-size: 13px;
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 5% 20px;
	padding: 0;}
#mail_form_7th table.form_mail td.mailleft {
	width: 35%;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	color: #ffffff;
	padding: 6px 0;
	border: none;}
#mail_form_7th table.form_mail td.mailright {
	width: 90%;
	margin: 0;
	text-align: left;
	padding: 6px 5%;
	border: none;}
#mail_form_7th input.mail-form {
	font-size: 14px;
	width: 83.5%;
	padding: 6px 5%;
	text-align: left;
	font-family: 'メイリオ','Meiryo';}
#mail_form_7th input.name-form {
	font-size: 14px;
	width: 40%;
	padding: 6px 0 6px 5%;
	text-align: left;
	font-family: 'メイリオ','Meiryo';}
#mail_form_7th p.white {
	font-size: 14px;
	font-weight: normal;
	color: #ffffff;}
#mail_form_7th input.btn {
	width: 400px;
	height: 95px;
	margin-left: auto;
	margin-right: auto;
	display: block;}
#mail_form_7th input.btn2 {
	width: 400px;
	height: 95px;
	margin: 10px auto;
	padding: 0;
	background: url(https://pocoakoko.com/wp-content/uploads/2023/07/btn1.png) center no-repeat;
	background-size: contain;
	overflow: hidden;
	font-size: 0;}
#mail_form_7th input.btn2:hover {
	background: url(https://pocoakoko.com/wp-content/uploads/2023/07/btn2.png) center no-repeat;
	background-size: contain;}

@media screen and (max-width: 768px){
#mail_form_7th .opt_blue, #mail_form_7th .opt_black, #mail_form_7th .opt_green, #mail_form_7th .opt_orange, #mail_form_7th .opt_pink,  #mail_form_7th .opt_white, #mail_form_7th .opt_yellow {
	width: 100%;
	margin: 40px auto;}
#mail_form_7th p.opt-catch {
	font-size: 18px;}
#mail_form_7th{
	width: 100%;
	margin: 0;
	padding: 0;}
#mail_form_7th table.form_mail {
	width: 90%;
	margin: 0 auto 10px;
	padding: 0;}
#mail_form_7th table.form_mail td.mailleft {
	min-width: 200px;
	width: 95%;
	text-align: left;
	padding-left: 5%;
	float: left;}
#mail_form_7th table.form_mail td.mailright {
	width: 85%;
	padding: 7px 5%;
	float: left;}
#mail_form_7th input.name-form {
	width: 100%;}
#mail_form_7th input.mail-form {
    width: 95%;}
#mail_form_7th h3#pp {
	font-size: 14px;
	text-align: left;
	margin: 5px 0;
	padding: 0;
	background: none;
	clear: both;}
#mail_form_7th #about-privacy {
	width: 92%;
	height: 70px;
	overflow: auto;
	font-size: 14px;
	margin: 20px 2% 0;
	padding: 10px 2%;
	border: 2px solid #CCCCCC;
	background-color: #FFFFFF;
	clear: both;}
#mail_form_7th #about-privacy p {
	font-size: 12px;
	line-height: 180%;
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 0;
	padding: 5px 0;}
}

@media screen and (max-width: 480px){
#mail_form_7th h3#pp {
	font-size: 14px;
	text-align: left;
	margin: 5px 0;
	padding: 0;
	background: none;
	clear: both;}
#mail_form_7th #about-privacy {
	width: 86%;
	height: 70px;
	overflow: auto;
	font-size: 14px;
	margin: 0 4% 2%;
	padding: 10px 2%;
	border: 2px solid #CCCCCC;
	background-color: #FFFFFF;
	clear: both;}
#mail_form_7th #about-privacy p {
	font-size: 12px;
	line-height: 180%;
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 0;
	padding: 5px 0;}
#mail_form_7th input{
	width: 100%;
	height: auto;
	display: block;}
#mail_form_7th input.btn2, #mail_form_7th input.btn, #mail_form_7th input.btn3 {
	width: 100%;
	height: 60px;
	display: block;}
}