@charset "utf-8";
/* CSS Document */

/* ====================================
         ここからリセットCSS
======================================= */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* ====================================
         ここまでリセットCSS
======================================= */
/* ====================================
              CSS Document
======================================= */
*{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ====================================
              全体設計
======================================= */
body {
	color: #21130f;
    font-size: 14px;
	line-height: 1;
	background-color: #fff;
}

div#wrapper {
	width: 1400px;
	margin: 0 auto;
}
/* ====================================
   　　　　　　ここからヘッダー
======================================= */

header{
	width: 1400px;
	height: 90px;
	background-color: #FFFFFF;
}

header a {
  margin-right: 10px;
  font-size: 24px;
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

header a:hover {
  color: #1da1f2; 
}

div#header_inner{
	display: flex;
}

header nav ul {
	display: flex;
}

nav ul li {
    margin-left: 95px;
    margin-top:60px;
	margin-right: 75px;
	font-family: fot-chiaro-std, sans-serif;
    font-style: normal;
    font-weight: 700;
}

nav ul li a {
	text-decoration: none;
	font-size:18px;
	font-weight: bold;
}

.icon-links {
	margin-left: 95px;
	margin-top:60px;
	margin-right: 75px;
}

/* ====================================
             ここまでヘッダー
======================================= */
/* ====================================
          ここからギャラリー
======================================= */
/* ギャラリー用 */
.gallery-container {
  max-width: 1400px;
  margin: 120px auto;
  padding: 0 20px;
  background-color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: 30px;                        
  justify-content: center;          
  align-items: center;                 
  margin: 60px auto;
}

.gallery-item {
  width: 800px;                        
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
  border-radius: 8px;
  overflow: hidden;
}
/* モーダル用 */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}

.modal-content {
  max-width: 90%;
  max-height: 80vh;
  margin: auto;
}

.modal .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
/* ====================================
         　ここまでギャラリー
======================================= */

/* ====================================
          ここからcontainer
======================================= */

#container1,
#container2{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 80px;
	margin-top: 80px;
}

div#tunagari{
	margin-left: 10px;
}

div#t-shirt{
	margin-left: 20px;
}

div#jacket{
    margin-right: 20px;
	margin-left: 20px;
}

div#nekonomimi {
	margin-left: 10px;
}

div#hokennsho {
	margin-left: 20px;
}


div#zounokuni {
    margin-right: 20px;
	margin-left: 20px;
}

/* ====================================
           ここまでcontainer
======================================= */

/* ====================================
           　ここからフッター
======================================= */

footer{
	width: 100%;
	height: 90px;
	margin-top: 40px;
	background-color: #FFFFFF;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* ====================================
             ここまでフッター
======================================= */


img.hover-transparent {
  transition: opacity 0.3s ease;
}

img.hover-transparent:hover {
  opacity: 0.6; 
}