@charset "utf-8";
/*==========================================================================

   browser reset

==========================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
header, hgroup, footer, section, article, details, menu, nav, aside, figure, figcaption {
    display: block;
}
a, a:focus {
    outline: none;
}
img, hr {
    border: none;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}
strong {
    font-weight: bold;
}

/*==========================================================================

   base set

==========================================================================*/
:root {
	/* font */
	--font-ja: "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	--font-en: "EB Garamond", serif;

	/* color */
    --theme-color: #d12d26; /* theme color */
	--text-color: #222; /* base color*/
	--text-color02: #5c5c5c; /* variable text color */
    --link-color: #681613; /* link color, strong color */
	--bg-color: #dcd8d3;
	--bg-color02: #f5f1eb;
    --gradient01: linear-gradient(90deg, #fbd6e3 0%, #fddfc7 25%, #e7d8ff 75%, #a9ede9 100%);
	--line-color : #c7c0b8;

	/* space */
    --container-width: 1020px;
    --sp-side-space: 20px;
	--section01-padding: 86px 0;
	
	/* animation */
	--transition-duration: .3s;
}

html {
    scroll-behavior: smooth;
}
body {
    position: relative;
    color: var(--text-color);
    font: 500 14px/1.5 var(--font-ja);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: #fff;
}
a {
    color: #000;
    /*text-decoration: none;*/
    transition: color var(--transition-duration), background-color var(--transition-duration);
}
a:hover {
    color: var(--key-color);
}
a[target="_blank"]::after{
	position: relative;
	top: .15em;
	left: .25em;
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 .5em 0 .05em;
	mask-image: url(../svg/i_target_blank01.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: #666;
	transition: background-color .3s;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
* {
    box-sizing: border-box;
}

/*==========================================================================

   utility style

==========================================================================*/
.font-en01 {font-family: var(--font-en);}

/* Additional utility classes */
.align-center { text-align: center;}
.align-left { text-align: left;}
.align-right { text-align: right;}

.youtube {
    aspect-ratio: 16 / 9;
}


/*----------------------------------------------------------------------------------------------------

	svg icon

----------------------------------------------------------------------------------------------------*/
@font-face {
  font-family: 'jamdicon';
  src:  url('../fonts/jamdicon.eot?wga19j');
  src:  url('../fonts/jamdicon.eot?wga19j#iefix') format('embedded-opentype'),
    url('../fonts/jamdicon.ttf?wga19j') format('truetype'),
    url('../fonts/jamdicon.woff?wga19j') format('woff'),
    url('../fonts/jamdicon.svg?wga19j#jamdicon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ji-"], [class*=" ji-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'jamdicon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ji-arrow-r:before {
  content: "\e905";
}
.ji-arrow-l:before {
  content: "\e906";
}
.ji-vimeo:before {
  content: "\e900";
}
.ji-youtube:before {
  content: "\e901";
}
.ji-instagram:before {
  content: "\e902";
}
.ji-twitterx:before {
  content: "\e903";
}
.ji-facebook:before {
  content: "\e904";
}