@charset "UTF-8";
/* === メールのヘルプ === */
/* 三宅龍太郎 c2017 */

@media screen {

	h4, h5 {
		margin: 1em 0 .5em;
	}
	:where(h4, h5) + p {
		margin: 0 0 1em;
	}

	/* 均等割附、折返し解除 */
	dl.copyarea dt:nth-of-type(2) {
		margin-top: 2em;
	}
	dl.copyarea label {
		/* 表示が煩雑になるので消去
		display: inline-block;
		margin: 0 .2em 0 0;
		text-align: start;
		text-justify: none;
		*/
		display: none;
	}
	input[type='text'] {
		width: initial;
	}
	p.copyarea {
		margin-top: 1.5em;
	}
	
	hr.separate {
		margin: 3rem auto 2rem;
		width: 80%;
		color: light-dark(#000, #fff);
	}

	/* メールフォーム */
	form dt {
		font-weight: 700;
	}
	form dd {
		margin: 0 0 0 4%;
	}
	form ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	form textarea {
		margin-top: .1875em;
		width: calc(100% - 3px);
		height: 8rem;
	}
	form fieldset {
		border: 0;
	}
	form legend {
		display: none;
	}
	form :is([type='text'], [type='email']) {
		width: 85%;
	}
	form [type='submit'] {
		padding: 0 .5em;
		font-size: 1.2em;
		line-height: 1.8;
		border-radius: .3125em;
	}
	form [type='submit']:focus {
		color: inherit;
		background-color: #666;
	}

}

@media screen and (min-width: 480px) {

	h2 + ul > li::before {
		content: url('../../../../image/icon/letter.svg');
		margin: 0 .2em 0 0;
		padding: 0;
		top: .2em;
	}
	h3 {
		clear: none;
	}
	h3::before {
		content: url('../../../../image/icon/help02.svg');
		margin: 0 .3em 0 0;
		padding: 0;
		line-height: 1.0em;
		vertical-align: middle;
	}

	/* もっと簡單に（コピー＆ペースト） */
	dl.copyarea dt {
		margin: 0;
	}
	dl.copyarea dt:nth-of-type(2) {
		clear: none;
	}
	dl.copyarea ol.flex {
		gap: .4em;
	}
	dl.copyarea ol.flex li:nth-of-type(2) img {
		width: 1rem;
	}
	dl.copyarea ol.flex li:nth-of-type(4) img {
		width: 1.375rem;
	}



	p.copyarea {
		padding: .4em 1em;
		border: dashed .125rem light-dark(#555, #aaa);
		border-radius: .5rem;
	}
	.qr img {
		width: 6.25rem;
	}

	/* メールフォーム */
	form {
		margin: 0;
		padding: 0;
	}
	form dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 .5em;
		margin: 0;
		padding: 1px 1px 1px 0;
		width: 100%;
	}
	form :is(dt, dd, li) {
		margin: 0;
		padding: 0;
		text-align: start;
	}
	form dt {
		display: block;
		text-align: center;
	}
	form :is([type='text'], [type='email']) {
		width: 70%;
	}
	form :is([type='text'], [type='email'])::placeholder {
		color: light-dark(rgba(220, 20, 60, .9), rgba(255, 192, 203, .8));
	}
	form textarea {
		height: 12rem;
	}
	form .flex._right {
		margin: 3px 3px 3px 0;
	}
	form [type='submit'] {
		font-size: 1em;
		line-height: inherit;
	}
	
	/* 水平線修飾 */
	hr.separate::after {
		content: '';
		width: 4.25rem;
		aspect-ratio: 400/370;
		background: Canvas url('../../../../../mailform/cmn/image/post.webp') no-repeat 50%/contain;
		top: -2rem;
	}

	h5:last-of-type + p {
		padding: 0 0 0 3%;
	}
	h4:last-of-type + p {
		margin-bottom: 0;
		padding: 0 0 2.5em 3%;
		color: inherit;
		background: transparent url('../../../../image/icon/cycle01.png') no-repeat 100% 100%;
	}
	:is(hr:not(.separate), footer) {
		margin-top: 0;
	}

	@media (prefers-color-scheme: dark) {

		/* ダークモードで自転車アイコンを消す */
		h4:last-of-type + p {
			background: none;
		}

	}

}